import type {Meta, StoryObj} from "@storybook/react";
import CustomDatePicker from "../../components/UI/Forms/CustomDateTimePicker/CustomDatePicker";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import dayjs from "dayjs";
import {useArgs} from "@storybook/preview-api";
import CustomTimePicker from "../../components/UI/Forms/CustomDateTimePicker/CustomTimePicker";


/***
 * Value must be dayjs or string in format: "2025-09-30T00:00:00"
 **/
const meta = {
    title: 'Components/Forms/CustomDatePicker',
    component: CustomDatePicker,
} satisfies Meta<typeof CustomDatePicker>;

export default meta;

type Story = StoryObj<typeof meta>;

export const CustomDatePickerEx: Story = {


        render: (args) => {

            const [{}, updateArgs] = useArgs();

            function handleChange(s: string) {
                updateArgs({value: s})
            }

            return (
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <CustomDatePicker {...args} onChange={handleChange}/>
                </LocalizationProvider>)
        }
        ,
        args:
            {
                value: "2025-09-30T00:00:00",
                onChange: () => {
                }
            }
    }
;


export const CustomTimePickerEx: Story = {


        render: (args) => {

            const [{}, updateArgs] = useArgs();

            function handleChange(s: string) {
                updateArgs({value: s})
            }

            return (
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <CustomTimePicker {...args} onChange={handleChange}/>
                </LocalizationProvider>)
        }
        ,
        args:
            {
                value: "2025-09-30T00:00:00",
                onChange: () => {
                }
            }
    }
;