import type { Meta, StoryObj } from '@storybook/react';
import { fn } from 'storybook/test';

import Countdown, { CountdownDisplay } from './Countdown';

type PagePropsAndCustomArgs = React.ComponentProps<typeof Countdown>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/Countdown',
  component: Countdown,
  argTypes: {
    className: {
      control: { type: 'text' },
    },
    children: {
      control: { type: 'text' },
    },
    display: {
      control: {
        type: 'select',
        labels: {
          [CountdownDisplay.DaysHoursMinutesSeconds]: 'D H M S',
          [CountdownDisplay.DaysHoursMinutes]: 'D H M',
          [CountdownDisplay.HoursMinutesSeconds]: 'H M S',
          [CountdownDisplay.HoursMinutes]: 'H M',
        },
      },
      options: [
        CountdownDisplay.DaysHoursMinutesSeconds,
        CountdownDisplay.DaysHoursMinutes,
        CountdownDisplay.HoursMinutesSeconds,
        CountdownDisplay.HoursMinutes,
      ],
    },
  },
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

function startOfToday() {
  const date = new Date();
  date.setHours(0, 0, 0, 0);
  return date;
}

function offsetDate(
  date: Date,
  dayOffset = 0,
  hourOffset = 0,
  minuteOffset = 0,
  secondOffset = 0,
  millisecondOffset = 0
) {
  date.setDate(date.getDate() + dayOffset);
  date.setHours(
    date.getHours() + hourOffset,
    date.getMinutes() + minuteOffset,
    date.getSeconds() + secondOffset,
    date.getMilliseconds() + millisecondOffset
  );
  return date;
}

export const Default: Story = {
  args: {
    targetDate: offsetDate(startOfToday(), 2),
    display: CountdownDisplay.DaysHoursMinutesSeconds,
  },
};

export const Precision: Story = {
  render: (args) => (
    <div className='flex flex-col gap-1'>
      <Countdown {...args} display={CountdownDisplay.DaysHoursMinutes} />
      <Countdown {...args} display={CountdownDisplay.DaysHoursMinutesSeconds} />
      <Countdown {...args} display={CountdownDisplay.HoursMinutes} />
      <Countdown {...args} display={CountdownDisplay.HoursMinutesSeconds} />
    </div>
  ),
  args: {
    targetDate: offsetDate(startOfToday(), 2),
  },
};

export const TimerEndCallback: Story = {
  args: {
    targetDate: offsetDate(new Date(), 0, 0, 0, 10, 0),
    display: CountdownDisplay.DaysHoursMinutesSeconds,
    onTimerEnd: fn(() => {
      window.alert('Timer ended');
    }),
  },
};