import { boolean, select, text, date } from '@storybook/addon-knobs';
import { userEvent } from '@storybook/test';
import { useState } from 'react';

import { Field } from '..';
import { Size } from '../common';
import { storyConfig } from '../test-utils';

import DateLookup from './DateLookup';

export default {
  component: DateLookup,
  title: 'Forms/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);
const size = select('size', Object.values([Size.SMALL, Size.MEDIUM, Size.LARGE]), Size.MEDIUM);

export const Basic = () => {
  const [value, setValue] = useState<Date | null>(epoch);
  const disabled = boolean('disabled', false);
  const label = text('label', 'label');
  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
  const placeholder = text('placeholder', 'placeholder');
  const id = text('id', 'date-lookup');

  const clearable = boolean('clearable', true);

  return (
    <DateLookup
      disabled={disabled}
      id={id}
      label={label}
      min={thePast}
      max={theFuture}
      monthFormat={monthFormat}
      placeholder={placeholder}
      size={size}
      value={value}
      clearable={clearable}
      onChange={(v) => {
        console.log(v);
        setValue(v);
      }}
    />
  );
};

Basic.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
  // testing focus state on keyboard nav
  await userEvent.tab();
  await userEvent.keyboard(' ');
};

export const Basic400Zoom = storyConfig(
  { render: Basic, play: Basic.play, parameters: { chromatic: { delay: 2000 } } },
  { variants: ['400%'] },
);

export const WithField = () => {
  const [value, setValue] = useState<Date | null>(epoch);
  const disabled = boolean('disabled', false);
  const label = text('label', 'label');
  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
  const placeholder = text('placeholder', 'Select date');
  const id = text('id', 'date-lookup');

  const clearable = boolean('clearable', true);

  return (
    <Field label="Date lookup">
      <DateLookup
        disabled={disabled}
        id={id}
        label={label}
        min={thePast}
        max={theFuture}
        monthFormat={monthFormat}
        placeholder={placeholder}
        size={size}
        value={value}
        clearable={clearable}
        onChange={(v) => {
          console.log(v);
          setValue(v);
        }}
      />
    </Field>
  );
};

export const RightAligned = () => {
  const [value, setValue] = useState<Date | null>(epoch);
  const disabled = boolean('disabled', false);
  const label = text('label', 'label');
  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
  const placeholder = text('placeholder', 'placeholder');

  const minvalue = date('minvalue', thePast);
  const maxvalue = date('maxvalue', theFuture);
  const clearable = boolean('clearable', false);

  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
          id="right-aligned"
          disabled={disabled}
          label={label}
          min={new Date(minvalue)}
          max={new Date(maxvalue)}
          monthFormat={monthFormat}
          placeholder={placeholder}
          size={size}
          value={value}
          clearable={clearable}
          onChange={(v) => setValue(v)}
        />
      </div>
    </div>
  );
};
