import React, { forwardRef, useState } from 'react';
import ReactDatePicker, {
  ReactDatePickerCustomHeaderProps,
  ReactDatePickerProps,
} from 'react-datepicker';
import { Box, Icon, Input, Text, ThemeColorType, useViewport } from '@nova-hf/ui';
import format from 'date-fns/format';
import en from 'date-fns/locale/en-US';
import is from 'date-fns/locale/is';

type FriscoDatepickerProps = {
  placeholder?: string;
  maxDate?: Date;
  minDate?: Date;
  color?: ThemeColorType;
  selected?: Date;
  onSelect: (date: Date) => void;
  isRequired?: boolean;
  inputId: string;
  inputName: string;
  dateFormat?: string;
  locale?: 'is' | 'en';
} & Omit<ReactDatePickerProps, 'onChange'>;

const FriscoDatePicker = ({
  placeholder = 'Veldu dagsetningu',
  color = 'pink',
  selected,
  minDate,
  maxDate,
  onSelect,
  isRequired,
  inputId,
  inputName,
  dateFormat = 'd.MMMM yyyy',
  locale = 'is',
  ...rest
}: FriscoDatepickerProps) => {
  const [isPickerOpen, setIsPickerOpen] = useState(false);
  const { isSmall } = useViewport();
  const toggleDatePicker = () => setIsPickerOpen((isOpen) => !isOpen);

  const ExampleCustomInput = forwardRef<
    HTMLInputElement,
    { value?: string; onIconClick: () => void }
  >(({ value, onIconClick }, ref) => {
    return (
      <Box position="relative">
        <Input
          ref={ref}
          onClick={() => toggleDatePicker()}
          onFocus={() => toggleDatePicker()}
          onKeyDown={() => toggleDatePicker()}
          placeholder={placeholder}
          id={inputId}
          name={inputName}
          color={color}
          value={value}
          isBold={false}
        />
        <Box
          style={{
            position: 'absolute',
            top: '50%',
            right: 0,
            transform: 'translate(0, -50%)',
          }}
          onClick={onIconClick}
        >
          <Icon icon="calendar" color={color} />
        </Box>
      </Box>
    );
  });
  return (
    <Box
      zIndex="customermenuitem"
      style={{ position: 'relative', width: '100%', display: 'block' }}
    >
      <ReactDatePicker
        wrapperClassName="force-width"
        popperContainer={({ children }) => (
          <div style={{ zIndex: 9999, position: 'relative' }}>{children}</div>
        )}
        onClickOutside={() => setIsPickerOpen(false)}
        selected={selected}
        onChange={(date) => date && onSelect(date)}
        open={isPickerOpen}
        dateFormat={dateFormat}
        locale={locale}
        minDate={minDate}
        maxDate={maxDate}
        customInput={
          <ExampleCustomInput onIconClick={() => setIsPickerOpen((isOpen) => !isOpen)} />
        }
        renderCustomHeader={({ increaseMonth, decreaseMonth, date }) => (
          <CustomHeader
            decreaseMonth={decreaseMonth}
            increaseMonth={increaseMonth}
            date={date}
            locale={locale}
          />
        )}
        showPopperArrow={false}
        onSelect={() => setIsPickerOpen(false)}
        required={isRequired}
        useWeekdaysShort
        popperPlacement={isSmall ? 'bottom' : 'bottom-start'}
        {...rest}
      />
    </Box>
  );
};

const CustomHeader = ({
  increaseMonth,
  decreaseMonth,
  date,
  locale,
}: Pick<ReactDatePickerCustomHeaderProps, 'decreaseMonth' | 'increaseMonth' | 'date'> & {
  locale: string;
}) => {
  return (
    <Box
      display="flex"
      justifyContent="space-between"
      padding={2}
      backgroundColor="white"
      alignItems="center"
    >
      <button onClick={decreaseMonth}>
        <Icon icon="arrowLeft" color="black100" />
      </button>
      <Box display="flex">
        <Text variant="pLargeBold" style={{ paddingRight: '6px', textTransform: 'capitalize' }}>
          {format(date, 'MMMM', { locale: locale === 'is' ? is : en })}
        </Text>
        <Text variant="pLargeRegular">{` ´${format(date, 'yy', {
          locale: locale === 'is' ? is : en,
        })}`}</Text>
      </Box>
      <button onClick={increaseMonth}>
        <Icon icon="arrowRight" color="black100" />
      </button>
    </Box>
  );
};

export default FriscoDatePicker;