import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { DatePicker } from "../ui-components/DatePicker";
import { DatePickerInfo } from "../ui-components/DatePicker/DatePickerInfo";
import { secondaryFont } from "../ui-components/constants";

export default {
  title: "Form Fields/DatePicker",
  component: DatePicker,
} as ComponentMeta<typeof DatePicker>;

const Template: ComponentStory<typeof DatePicker> = (args) => <DatePicker {...args} />;

const InfoTemplate: ComponentStory<typeof DatePicker> = () => (
  <>
    <DatePickerInfo />
    <div style={{ display: "flex", gap: "16px", marginTop: "16px" }}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "2px",
          fontFamily: secondaryFont,
          fontSize: "20px",
        }}
      >
        <span style={{ marginLeft: "35px" }}>Day</span>
        <DatePicker picker="date" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "2px",
          fontFamily: secondaryFont,
          fontSize: "20px",
        }}
      >
        <span style={{ marginLeft: "35px" }}>Month</span>

        <DatePicker picker="month" />
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "2px",
          fontFamily: secondaryFont,
          fontSize: "20px",
        }}
      >
        <span style={{ marginLeft: "35px" }}>Quarter</span>
        <DatePicker picker="quarter" />
      </div>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "2px",
          fontFamily: secondaryFont,
          fontSize: "20px",
        }}
      >
        {" "}
        <span style={{ marginLeft: "35px" }}>Year</span>
        <DatePicker picker="year" />
      </div>
    </div>
  </>
);

export const DatePickerDetails = InfoTemplate.bind({});

export const DayPicker = Template.bind({});
DayPicker.args = {
  picker: "date",
};

export const DayPickerNoArrows = Template.bind({});
DayPickerNoArrows.args = {
  picker: "date",
  isShowArrows: false,
  labelText: "Day",
};

export const MonthPicker = Template.bind({});
MonthPicker.args = {
  picker: "month",
};

export const QuarterPicker = Template.bind({});
QuarterPicker.args = {
  picker: "quarter",
};

export const YearPicker = Template.bind({});
YearPicker.args = {
  picker: "year",
};
