import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { DatePicker } from "../DatePicker";
const meta = {
    title: "Components/DatePicker",
    component: DatePicker,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { DatePicker } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: {
                width: "400px",
            }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        mode: {
            control: "radio",
            options: ["single", "range"],
            description: "The mode of date selection - either single date or date range",
            table: {
                category: "Behavior",
                type: {
                    summary: "'single' | 'range'",
                },
                defaultValue: { summary: "single" },
            },
        },
        selectedSingleDate: {
            control: false,
            description: "The currently selected date (for single mode)",
            table: {
                category: "State",
                type: {
                    summary: "Date | undefined",
                },
            },
        },
        setSelectedSingleDate: {
            control: false,
            description: "Callback function to update the selected date (for single mode)",
            table: {
                category: "Callbacks",
                type: {
                    summary: "(date: Date | undefined) => void",
                },
            },
        },
        selectedRangeDates: {
            control: false,
            description: "The currently selected date range (for range mode), use type DateRange from react-day-picker",
            table: {
                category: "State",
                type: {
                    summary: "DateRange | undefined",
                },
            },
        },
        setSelectedRangeDates: {
            control: false,
            description: "Callback function to update the selected date range (for range mode), use type DateRange from react-day-picker",
            table: {
                category: "Callbacks",
                type: {
                    summary: "(range: DateRange | undefined) => void",
                },
            },
        },
        className: {
            control: false,
            description: "Additional CSS class name for custom styling",
            table: {
                category: "Styling",
                type: {
                    summary: "string",
                },
            },
        },
        style: {
            control: false,
            description: "Inline CSS styles for custom styling",
            table: {
                category: "Styling",
                type: {
                    summary: "CSSProperties",
                },
            },
        },
    },
    tags: ["!dev", "autodocs"],
};
export default meta;
// Basic single date picker with docked variant
export const SinglePicker = {
    render: (args) => _jsx(DatePicker, { ...args, style: { width: "400px" } }),
    args: {
        mode: "single",
    },
};
// Range date picker with docked variant
export const RangePicker = {
    args: {
        mode: "range",
    },
    parameters: {
        docs: {
            description: {
                story: "Range picker with docked variant. Select dates by dragging across the calendar",
            },
        },
    },
};
// Single date picker with floating variant
export const FloatingPicker = {
    render: (args) => _jsx(DatePicker, { ...args, style: { width: "350px" } }),
    args: {
        mode: "single",
    },
};
export const ControlledSingle = {
    render: (args) => {
        const [selectedDate, setSelectedDate] = useState();
        return (_jsxs("div", { children: [_jsx(DatePicker, { mode: args["mode"], selectedSingleDate: selectedDate, setSelectedSingleDate: setSelectedDate }), _jsxs("div", { style: { marginTop: "1rem" }, children: ["Selected date: ", selectedDate?.toLocaleDateString()] })] }));
    },
    args: {
        mode: "single",
    },
    parameters: {
        docs: {
            source: {
                code: `
const ControlledDatePickerExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date>();

  return (
    <div>
      <DatePicker
        mode="single"
        selectedSingleDate={selectedDate}
        setSelectedSingleDate={setSelectedDate}
      />
      <div style={{ marginTop: "1rem" }}>
        Selected date: {selectedDate?.toLocaleDateString()}
      </div>
    </div>
  );
};`,
                language: "tsx",
                type: "code",
            },
        },
    },
};
// Controlled range date picker
const ControlledRangePicker = () => {
    const [dateRange, setDateRange] = useState();
    return (_jsxs("div", { children: [_jsx(DatePicker, { mode: "range", selectedRangeDates: dateRange, setSelectedRangeDates: setDateRange }), _jsxs("div", { style: { marginTop: "1rem" }, children: ["Selected range: ", dateRange?.from?.toLocaleDateString(), " -", " ", dateRange?.to?.toLocaleDateString()] })] }));
};
export const ControlledRange = {
    render: () => _jsx(ControlledRangePicker, {}),
    parameters: {
        docs: {
            source: {
                code: `
import { DateRange } from "react-day-picker";

const ControlledRangePicker = () => {
  const [dateRange, setDateRange] = useState<DateRange>();

  return (
    <div>
      <DatePicker
        mode="range"
        selectedRangeDates={dateRange}
        setSelectedRangeDates={setDateRange}
      />
      <div style={{ marginTop: "1rem" }}>
        Selected range: {dateRange?.from?.toLocaleDateString()} - {dateRange?.to?.toLocaleDateString()}
      </div>
    </div>
  );
};`,
                language: "tsx",
                type: "code",
            },
        },
    },
};
//# sourceMappingURL=DatePicker.stories.js.map