import { useState } from 'react';
import { StoryObj } from '@storybook/react-webpack5';
import { Field } from '..';
import { Size } from '../common';
import DateLookup, { type DateLookupProps } from './DateLookup';

export default {
  component: DateLookup,
  title: 'Forms/DateLookup',
  argTypes: {
    size: { control: 'select', options: [Size.SMALL, Size.MEDIUM, Size.LARGE] },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
    monthFormat: { control: 'select', options: ['long', 'short'] },
    placeholder: { control: 'text' },
    id: { control: 'text' },
    clearable: { control: 'boolean' },
    min: { control: 'date' },
    max: { control: 'date' },
  },
};

type Story = StoryObj<typeof DateLookup>;

const epoch = new Date('2011-01-01');
const theFuture = new Date(epoch);
theFuture.setUTCDate(epoch.getUTCDate() + 10);
const thePast = new Date(epoch);
thePast.setUTCDate(epoch.getUTCDate() - 10);

export const Basic: Story = {
  render: (args: DateLookupProps) => {
    const [value, setValue] = useState<Date | null>(epoch);
    return (
      <DateLookup
        {...args}
        min={args.min ? new Date(args.min) : thePast}
        max={args.max ? new Date(args.max) : theFuture}
        value={value}
        onChange={(v) => setValue(v)}
      />
    );
  },
  args: {
    size: Size.MEDIUM,
    disabled: false,
    label: 'label',
    monthFormat: 'long',
    placeholder: 'placeholder',
    id: 'date-lookup',
    clearable: true,
    min: thePast,
    max: theFuture,
  },
};

export const WithField: Story = {
  render: (args: DateLookupProps) => {
    const [value, setValue] = useState<Date | null>(epoch);
    return (
      <Field label="Date lookup">
        <DateLookup
          {...args}
          min={args.min ? new Date(args.min) : thePast}
          max={args.max ? new Date(args.max) : theFuture}
          value={value}
          onChange={(v) => setValue(v)}
        />
      </Field>
    );
  },
};

export const RightAligned: Story = {
  render: (args: DateLookupProps) => {
    const [value, setValue] = useState<Date | null>(epoch);
    return (
      <div className="row">
        <div className="col-xs-6">
          <p>
            This example demonstrates the automatic right alignment behaviour of the calendar. If,
            when the calendar is opened, it is cut off on the right, the component will align the
            calendar to the rightmost edge of the lookup input.
          </p>
        </div>
        <div className="col-xs-6">
          <DateLookup
            {...args}
            id="right-aligned"
            min={args.min ? new Date(args.min) : thePast}
            max={args.max ? new Date(args.max) : theFuture}
            value={value}
            onChange={(v) => setValue(v)}
          />
        </div>
      </div>
    );
  },
};