import { DateFormat } from 'reablocks';
import { useState } from 'react';
import { DateInput } from 'reablocks';
import { COMBINED_PRESETS, PAST_RANGE_PRESETS } from 'reablocks';

export default {
  title: 'Components/Form/Date Input',
  component: DateInput
};

export const Simple = () => {
  const [date, setDate] = useState<Date>(new Date());

  return (
    <div className="flex items-center gap-2.5 flex-col">
      <DateFormat date={date} format="MM/dd/yyyy" />
      <DateInput value={date} onChange={setDate} />
    </div>
  );
};

export const Error = () => {
  const [date, setDate] = useState<Date>(new Date());

  return <DateInput error value={date} onChange={setDate} />;
};

export const Disabled = () => {
  const [date, setDate] = useState<Date>(new Date());

  return <DateInput disabled value={date} onChange={setDate} />;
};

export const CustomIcon = () => {
  const [date, setDate] = useState<Date>(new Date());

  return (
    <DateInput
      value={date}
      onChange={setDate}
      icon={
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
        >
          <path
            d="M11.75 5.75C12.5785 5.75 13.25 6.4215 13.25 7.25V11.5C13.25 12.3272 12.5772 13 11.75 13H4.25C3.42275 13 2.75 12.3272 2.75 11.5V7.25C2.75 6.4215 3.4215 5.75 4.25 5.75H11.75ZM5.5 11.25V10.75C5.5 10.612 5.388 10.5 5.25 10.5H4.75C4.612 10.5 4.5 10.612 4.5 10.75V11.25C4.5 11.388 4.612 11.5 4.75 11.5H5.25C5.388 11.5 5.5 11.388 5.5 11.25ZM5.5 9.5V9C5.5 8.862 5.388 8.75 5.25 8.75H4.75C4.612 8.75 4.5 8.862 4.5 9V9.5C4.5 9.638 4.612 9.75 4.75 9.75H5.25C5.388 9.75 5.5 9.638 5.5 9.5ZM7.5 11.25V10.75C7.5 10.612 7.388 10.5 7.25 10.5H6.75C6.612 10.5 6.5 10.612 6.5 10.75V11.25C6.5 11.388 6.612 11.5 6.75 11.5H7.25C7.388 11.5 7.5 11.388 7.5 11.25ZM7.5 9.5V9C7.5 8.862 7.388 8.75 7.25 8.75H6.75C6.612 8.75 6.5 8.862 6.5 9V9.5C6.5 9.638 6.612 9.75 6.75 9.75H7.25C7.388 9.75 7.5 9.638 7.5 9.5ZM7.5 7.75V7.25C7.5 7.112 7.388 7 7.25 7H6.75C6.612 7 6.5 7.112 6.5 7.25V7.75C6.5 7.888 6.612 8 6.75 8H7.25C7.388 8 7.5 7.888 7.5 7.75ZM9.5 11.25V10.75C9.5 10.612 9.388 10.5 9.25 10.5H8.75C8.612 10.5 8.5 10.612 8.5 10.75V11.25C8.5 11.388 8.612 11.5 8.75 11.5H9.25C9.388 11.5 9.5 11.388 9.5 11.25ZM9.5 9.5V9C9.5 8.862 9.388 8.75 9.25 8.75H8.75C8.612 8.75 8.5 8.862 8.5 9V9.5C8.5 9.638 8.612 9.75 8.75 9.75H9.25C9.388 9.75 9.5 9.638 9.5 9.5ZM9.5 7.75V7.25C9.5 7.112 9.388 7 9.25 7H8.75C8.612 7 8.5 7.112 8.5 7.25V7.75C8.5 7.888 8.612 8 8.75 8H9.25C9.388 8 9.5 7.888 9.5 7.75ZM11.5 9.5V9C11.5 8.862 11.388 8.75 11.25 8.75H10.75C10.612 8.75 10.5 8.862 10.5 9V9.5C10.5 9.638 10.612 9.75 10.75 9.75H11.25C11.388 9.75 11.5 9.638 11.5 9.5ZM11.5 7.75V7.25C11.5 7.112 11.388 7 11.25 7H10.75C10.612 7 10.5 7.112 10.5 7.25V7.75C10.5 7.888 10.612 8 10.75 8H11.25C11.388 8 11.5 7.888 11.5 7.75ZM4.25 5C3.673 5 3.14825 5.219 2.75 5.57625V4.5C2.75 3.67275 3.42275 3 4.25 3H11.75C12.5772 3 13.25 3.67275 13.25 4.5V5.57625C12.8518 5.219 12.327 5 11.75 5H4.25Z"
            fill="currentColor"
          />
        </svg>
      }
    />
  );
};

export const Preset = () => {
  const [date, setDate] = useState<Date>(new Date());
  return (
    <DateInput value={date} onChange={setDate} preset={COMBINED_PRESETS} />
  );
};

export const CustomPreset = () => {
  const [date, setDate] = useState<Date>(new Date());
  return (
    <DateInput
      value={date}
      onChange={setDate}
      preset={[
        {
          label: 'Labor Day',
          value: () => {
            const laborDay = new Date(new Date().getFullYear(), 8, 1);
            // First Monday in September
            while (laborDay.getDay() !== 1) {
              laborDay.setDate(laborDay.getDate() - 1);
            }

            return laborDay;
          }
        },
        {
          label: 'New Year',
          value: new Date(new Date().getFullYear(), 0, 1)
        },
        {
          label: 'Christmas',
          value: new Date(new Date().getFullYear(), 11, 25)
        }
      ]}
      openCalendarOptionName="Open Calendar"
    />
  );
};

export const Range = () => {
  const [date, setDate] = useState<[Date, Date]>([new Date(), new Date()]);

  return (
    <div className="flex items-center gap-2.5 flex-col w-[300px]">
      <div className="flex items-center gap-2.5">
        <DateFormat date={date[0]} format="MM/dd/yyyy" /> -{' '}
        <DateFormat date={date[1]} format="MM/dd/yyyy" />
      </div>
      <DateInput
        fullWidth
        isRange
        value={date}
        onChange={(value: [Date, Date]) => setDate(value)}
      />
    </div>
  );
};

export const RangePreset = () => {
  const [date, setDate] = useState<[Date, Date]>([new Date(), new Date()]);

  return (
    <div className="flex items-center gap-2.5 flex-col w-[300px]">
      <div className="flex items-center gap-2.5">
        <DateFormat date={date[0]} format="MM/dd/yyyy" /> -{' '}
        <DateFormat date={date[1]} format="MM/dd/yyyy" />
      </div>
      <DateInput
        fullWidth
        isRange
        value={date}
        onChange={(value: [Date, Date]) => setDate(value)}
        preset={PAST_RANGE_PRESETS}
      />
    </div>
  );
};

export const OpenOnFocus = () => {
  const [date, setDate] = useState<Date>(new Date());

  return <DateInput fullWidth openOnFocus value={date} onChange={setDate} />;
};