import { DateInput, DateRangeInputs, DateTimeInput, MonthInput, WeekInput } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const DATE_PICKER_GUIDE = {
  summary:
    'DateInput, DateTimeInput, MonthInput, and WeekInput are thin wrappers: each fixes type on Input. Every prop is optional with Input defaults except you normally pass label and value/defaultValue. min and max are supported: pass strings in the format the browser expects for that input type (see props overview). DateRangeInputs is one grouped field: a single label and one bordered row with two native date pickers separated by an en dash (start and end); pass `start` and `end` for per-side props (same as DateInput minus label/helper/error — those belong on the group).',
  propsOverview:
    'DateRangeInputs: label (default "Date range", use "" + aria-label for unlabeled group), aria-label, className, error, errorMessage, helperText, required, start?, end? — start/end are DateRangeSideProps (DateInput props without label, error, errorMessage, helperText, type). Each single-date component accepts the same props as Input except type is omitted (set internally): label, error, errorMessage, helperText, characterMask, endAdornment, value, defaultValue, onChange, onValueChange, onClick, min, max, step, disabled, readOnly, required, id, name, className, aria-*, etc. Range limits: DateInput min/max as YYYY-MM-DD; DateTimeInput as datetime-local (e.g. 2026-04-17T09:00); MonthInput as YYYY-MM; WeekInput as YYYY-Www (e.g. 2026-W16).',
  features: ['Clicking the field opens the native picker where the browser supports it'],
  codeLabel: 'Full example (DateInput; others identical API, different component)',
  code: `import { DateInput, DateRangeInputs, DateTimeInput, MonthInput, WeekInput } from 'ccl-ui-components-react';

<DateInput
  label="Date"
  defaultValue="2026-04-17"
  min="2026-01-01"
  max="2026-12-31"
  error={false}
  errorMessage=""
  helperText=""
  disabled={false}
  readOnly={false}
  required={false}
  onValueChange={(v) => {}}
  onChange={(e) => {}}
  id="start-date"
  name="start"
  className=""
/>
<DateTimeInput label="Date and time" defaultValue="2026-04-17T12:00" />
<MonthInput label="Month" defaultValue="2026-04" />
<WeekInput label="Week" defaultValue="2026-W16" />

<DateRangeInputs
  label="Trip dates"
  helperText="Pick start and end in one row."
  start={{
    name: 'start',
    defaultValue: '2026-04-01',
    min: '2026-01-01',
    max: '2026-12-31',
  }}
  end={{
    name: 'end',
    defaultValue: '2026-04-30',
    min: '2026-01-01',
    max: '2026-12-31',
  }}
/>`,
} as const;

export default function DatePickerPage() {
  return (
    <DemoPageWithGuide guide={DATE_PICKER_GUIDE}>
    <main className="demo demo-page">
      <h1>Date pickers</h1>
      <p className="demo-lead">Native date and time inputs with shared field styling.</p>

      <section className="demo-section">
        <div className="demo-ff-stack" style={{ maxWidth: 560 }}>
          <DateInput label="Date" defaultValue="2019-08-19" />
          <DateInput
            label="Date with min / max"
            defaultValue="2019-08-19"
            min="2019-08-01"
            max="2019-08-31"
            helperText="Native bounds: August 2019 only."
          />
          <DateRangeInputs
            label="Stay dates"
            helperText="One field, two native date pickers. Tie end min to start in your form state if needed."
            start={{
              name: 'trip-start',
              defaultValue: '2019-08-10',
              min: '2019-08-01',
              max: '2019-08-31',
            }}
            end={{
              name: 'trip-end',
              defaultValue: '2019-08-20',
              min: '2019-08-01',
              max: '2019-08-31',
            }}
          />
          <DateTimeInput label="Date and time" defaultValue="2019-08-19T13:45" />
          <MonthInput label="Month" defaultValue="2019-08" />
          <WeekInput label="Week" defaultValue="2019-W33" />
        </div>
      </section>
    </main>
    </DemoPageWithGuide>
  );
}