Datepicker

function BasicExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return <Datepicker selected={selectedDay} onSelect={setSelectedDay} />;
}

function FormatExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Flex marginBottom="spacingM" flexDirection="column" fullWidth>
      <Box marginBottom="spacingM">
        <Datepicker
          dateFormat="do LLL yyyy"
          selected={selectedDay}
          onSelect={setSelectedDay}
        />
      </Box>
      <Box>
        <Datepicker
          dateFormat="dd.MM.yyyy"
          selected={selectedDay}
          onSelect={setSelectedDay}
        />
      </Box>
    </Flex>
  );
}

function VisualStatesExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <>
      <SectionHeading>Disabled</SectionHeading>
      <Datepicker
        selected={selectedDay}
        onSelect={setSelectedDay}
        inputProps={{ isDisabled: true }}
      />
      <br />
      <SectionHeading>Invalid</SectionHeading>
      <Datepicker
        selected={selectedDay}
        onSelect={setSelectedDay}
        inputProps={{ isInvalid: true }}
      />
    </>
  );
}

function WithFormControlExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <FormControl id="date" isRequired>
      <FormControl.Label>Date</FormControl.Label>
      <Datepicker selected={selectedDay} onSelect={setSelectedDay} />
      <FormControl.HelpText>Please enter a publish date</FormControl.HelpText>
    </FormControl>
  );
}

function LimitingTheDateRangeExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());
  const fromDate = new Date();
  const twoYearsFromNow = new Date(
    new Date(fromDate).setFullYear(fromDate.getFullYear() + 2),
  );

  return (
    <Datepicker
      fromDate={fromDate}
      toDate={twoYearsFromNow}
      selected={selectedDay}
      onSelect={setSelectedDay}
    />
  );
}

function WithMultipleMonthsExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Datepicker
      selected={selectedDay}
      onSelect={setSelectedDay}
      numberOfMonths={2}
    />
  );
}

function PlaceholderExample() {
  const [selectedDay, setSelectedDay] = useState(undefined);

  return (
    <Datepicker
      selected={selectedDay}
      onSelect={setSelectedDay}
      placeholder="Select a date"
    />
  );
}

function DefaultOpenExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Datepicker
      defaultIsOpen
      selected={selectedDay}
      onSelect={setSelectedDay}
    />
  );
}

function CustomExample() {
  const DATE_FORMAT = 'yyyy-MM-dd'; // e.g. 2022-01-31

  const [selected, setSelected] = useState(new Date('2022-04-15'));
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const [inputValue, setInputValue] = useState(() =>
    selected ? format(selected, DATE_FORMAT) : '',
  );
  const [isInputInvalid, setIsInputInvalid] = useState(false);
  const popoverWasClosed = useRef(false);

  const closePopover = () => {
    popoverWasClosed.current = true;
    setIsPopoverOpen(false);
  };

  const handleDaySelect = (date) => {
    if (date) {
      setSelected(date);
      setInputValue(format(date, DATE_FORMAT));
      closePopover();
    }
  };

  const handleInputFocus = () => {
    // when popover gets closed focus returns to the input,
    // we want to prevent popover to be opened in this case
    if (popoverWasClosed.current) {
      popoverWasClosed.current = false;
      return;
    }

    setIsPopoverOpen((state) => !state);
  };

  const hendleInputKeyDown = (event) => {
    if (event.key === 'Enter' && !isInputInvalid) {
      event.preventDefault();
      setIsPopoverOpen(true);
    }
  };

  const handleInputChange = (e) => {
    const value = e.currentTarget.value;
    setInputValue(value);

    const date = parse(value, DATE_FORMAT, new Date());
    if (isValid(date)) {
      setIsInputInvalid(false);
      setSelected(date);
    } else {
      setIsInputInvalid(true);
      setSelected(undefined);
    }
  };

  return (
    <Popover isOpen={isPopoverOpen} onClose={closePopover}>
      <Popover.Trigger>
        <TextInput
          placeholder={format(new Date(), DATE_FORMAT)}
          value={inputValue}
          onChange={handleInputChange}
          onFocus={handleInputFocus}
          onKeyDown={hendleInputKeyDown}
          isInvalid={isInputInvalid}
          aria-label="Choose date"
        />
      </Popover.Trigger>
      <Popover.Content>
        <FocusLock returnFocus={true}>
          <Calendar
            className={css({
              padding: tokens.spacingM,
            })}
            mode="single"
            selected={selected}
            onSelect={handleDaySelect}
            initialFocus={false}
            defaultMonth={selected}
          />
        </FocusLock>
      </Popover.Content>
    </Popover>
  );
}