import React from 'react'
import { Button, Grid, Header, Segment } from "semantic-ui-react";


export default function DateControlSegment({ selectedDate, setSelectedDate }) {

    const options: Intl.DateTimeFormatOptions = { weekday: "long", year: 'numeric', month: 'long', day: 'numeric' };

    const handleDateChange = (days) => {
       setSelectedDate(prevSelectedDate => addDays(prevSelectedDate, days))
      
    }

    function addDays(date, days) {
        var result = new Date(date);
        result.setDate(result.getDate() + days);
        return result;
    }


    return (
        <Segment textAlign="center">
            <Grid verticalAlign="middle">
                <Grid.Column width={4}>
                    <Button floated="left" onClick={() => handleDateChange(-1)} icon="arrow left" />
                </Grid.Column>
                <Grid.Column width={8}>
                    <Header className="middle" as="h3">{selectedDate?.toLocaleDateString('de-CH', options)}</Header>
                </Grid.Column>
                <Grid.Column width={4}>
                    <Button floated="right" onClick={() => handleDateChange(1)} icon="arrow right" />
                </Grid.Column>
            </Grid>
        </Segment>
    )
}
