/* eslint-disable react-hooks/rules-of-hooks */
import React, {useState} from 'react';
import {Meta, StoryObj} from '@storybook/react';

import {
  DatePicker as DatePickerComponent,
  RangePicker as RangePickerComponent,
} from './index';
import {DateType} from './components/RangePicker';

const meta: Meta<typeof DatePickerComponent> = {
  title: 'HuGo/DatePicker',
  component: DatePickerComponent,
};

type DatePickerStory = StoryObj<typeof DatePickerComponent>;
type RangePickerStory = StoryObj<typeof RangePickerComponent>;

export const DatePicker: DatePickerStory = {
  argTypes: {
    minDate: {control: 'date'},
    maxDate: {control: 'date'},
    value: {control: 'date'},
    initialView: {
      control: 'radio',
      options: ['months', 'years', 'days'],
    },
    initialDate: {control: 'date'},
  },
  args: {
    initialView: 'days',
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>(
      args.value ? new Date(args.value) : undefined,
    );

    const handleChange = (newValue: Date) => {
      setValue(newValue);
      args.onChange?.(newValue);
    };

    return (
      <DatePickerComponent
        {...args}
        value={value}
        onChange={handleChange}
        minDate={args.minDate ? new Date(args.minDate) : undefined}
        maxDate={args.maxDate ? new Date(args.maxDate) : undefined}
        initialDate={args.initialDate ? new Date(args.initialDate) : undefined}
      />
    );
  },
};

export const DatePickerWithMinMax: DatePickerStory = {
  args: {
    minDate: new Date(2024, 0, 1),
    maxDate: new Date(2024, 11, 31),
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>(undefined);

    return <DatePickerComponent {...args} value={value} onChange={setValue} />;
  },
};

export const DatePickerWithInitialDate: DatePickerStory = {
  args: {
    initialDate: new Date(2024, 5, 15),
    initialView: 'days',
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>(undefined);

    return <DatePickerComponent {...args} value={value} onChange={setValue} />;
  },
};

export const DatePickerWithInitialView: DatePickerStory = {
  argTypes: {
    initialView: {
      control: 'radio',
      options: ['months', 'years', 'days'],
    },
  },
  args: {
    initialView: 'months',
  },
  render: args => {
    const [value, setValue] = useState<Date | undefined>(undefined);

    return <DatePickerComponent {...args} value={value} onChange={setValue} />;
  },
};

export const RangePicker: RangePickerStory = {
  argTypes: {
    minDate: {control: 'date'},
    maxDate: {control: 'date'},
    selectedStartDate: {control: 'date'},
    selectedEndDate: {control: 'date'},
  },
  render: args => {
    const [startDate, setStartDate] = useState<Date | undefined>(
      args.selectedStartDate ? new Date(args.selectedStartDate) : undefined,
    );
    const [endDate, setEndDate] = useState<Date | undefined>(
      args.selectedEndDate ? new Date(args.selectedEndDate) : undefined,
    );

    const handleChange = (newValue: Date, type?: DateType) => {
      if (type === 'START_DATE') {
        setStartDate(newValue);
      } else if (type === 'END_DATE') {
        setEndDate(newValue);
      } else {
        if (!startDate || (startDate && endDate)) {
          setStartDate(newValue);
          setEndDate(undefined);
        } else {
          setEndDate(newValue);
        }
      }
      args.onChange?.(newValue, type);
    };

    return (
      <RangePickerComponent
        {...args}
        selectedStartDate={startDate}
        selectedEndDate={endDate}
        onChange={handleChange}
        minDate={args.minDate ? new Date(args.minDate) : undefined}
        maxDate={args.maxDate ? new Date(args.maxDate) : undefined}
      />
    );
  },
};

export const RangePickerWithMinMax: RangePickerStory = {
  args: {
    minDate: new Date(2024, 0, 1),
    maxDate: new Date(2024, 11, 31),
  },
  render: args => {
    const [startDate, setStartDate] = useState<Date | undefined>(undefined);
    const [endDate, setEndDate] = useState<Date | undefined>(undefined);

    const handleChange = (newValue: Date, type?: DateType) => {
      if (type === 'START_DATE') {
        setStartDate(newValue);
      } else if (type === 'END_DATE') {
        setEndDate(newValue);
      } else {
        if (!startDate || (startDate && endDate)) {
          setStartDate(newValue);
          setEndDate(undefined);
        } else {
          setEndDate(newValue);
        }
      }
    };

    return (
      <RangePickerComponent
        {...args}
        selectedStartDate={startDate}
        selectedEndDate={endDate}
        onChange={handleChange}
      />
    );
  },
};

export const RangePickerWithPreselectedRange: RangePickerStory = {
  args: {
    selectedStartDate: new Date(2024, 5, 10),
    selectedEndDate: new Date(2024, 5, 20),
  },
  render: args => {
    const [startDate, setStartDate] = useState<Date | undefined>(
      args.selectedStartDate ? new Date(args.selectedStartDate) : undefined,
    );
    const [endDate, setEndDate] = useState<Date | undefined>(
      args.selectedEndDate ? new Date(args.selectedEndDate) : undefined,
    );

    const handleChange = (newValue: Date, type?: DateType) => {
      if (type === 'START_DATE') {
        setStartDate(newValue);
      } else if (type === 'END_DATE') {
        setEndDate(newValue);
      } else {
        if (!startDate || (startDate && endDate)) {
          setStartDate(newValue);
          setEndDate(undefined);
        } else {
          setEndDate(newValue);
        }
      }
    };

    return (
      <RangePickerComponent
        {...args}
        selectedStartDate={startDate}
        selectedEndDate={endDate}
        onChange={handleChange}
        minDate={args.minDate ? new Date(args.minDate) : undefined}
        maxDate={args.maxDate ? new Date(args.maxDate) : undefined}
      />
    );
  },
};

export default meta;