import React from "react";

import { Meta, StoryObj } from "@storybook/react";
import { DateTime } from "luxon";

import CardContent from "./CardContent";
import { CardFieldDate } from "./CardFieldDate";
import CardHeader from "./CardHeader";
import CardRow from "./CardRow";
import Card from "./index";

const meta: Meta<typeof CardFieldDate> = {
  component: CardFieldDate,
  decorators: [
    (Story) => (
      <Card defaultEditing isEditable>
        <CardHeader title="CardFieldDate Demo" />
        <CardContent>
          <CardRow>
            <Story />
          </CardRow>
        </CardContent>
      </Card>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof CardFieldDate>;

export const Default: Story = {
  args: {
    label: "Date",
    formName: "date",
    value: DateTime.now(),
  },
};

export const WithCustomValue: Story = {
  args: {
    label: "Birth Date",
    formName: "birthDate",
    value: DateTime.fromISO("1990-01-15"),
  },
};

export const WithStringValue: Story = {
  args: {
    label: "Event Date",
    formName: "eventDate",
    value: "2024-12-31",
  },
};

export const Empty: Story = {
  args: {
    label: "Optional Date",
    formName: "optionalDate",
    value: undefined,
  },
};

export const Disabled: Story = {
  args: {
    label: "Disabled Date",
    formName: "disabledDate",
    value: DateTime.now(),
    isDisabled: true,
  },
};

export const WithHelperText: Story = {
  args: {
    label: "Appointment Date",
    formName: "appointmentDate",
    value: DateTime.now(),
    helperText: "Please select your preferred appointment date",
  },
};

export const WithLocaleGB: Story = {
  args: {
    label: "Date (en-GB locale)",
    formName: "dateGB",
    value: DateTime.now(),
    adapterLocale: "en-GB",
    helperText: "Week starts on Monday",
  },
};

export const WithLocaleUS: Story = {
  args: {
    label: "Date (en-US locale)",
    formName: "dateUS",
    value: DateTime.now(),
    adapterLocale: "en-US",
    helperText: "Week starts on Sunday",
  },
};

export const ReadOnlyMode: Story = {
  args: {
    label: "Created At",
    formName: "createdAt",
    value: DateTime.fromISO("2023-06-15"),
  },
  decorators: [
    (Story) => (
      <Card>
        <CardHeader title="Read-Only CardFieldDate" />
        <CardContent>
          <CardRow>
            <Story />
          </CardRow>
        </CardContent>
      </Card>
    ),
  ],
};