// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { DateTimePickerErrorType } from "@coreai-ds/react-components";
import * as React from 'react';
import { Field } from "@coreai-ds/react-components";
import { DateTimePicker } from "@coreai-ds/react-components";

export const Controlled = () => {
    const validationMessages: Record<DateTimePickerErrorType, string> = {
        'required-input': 'A date is required.',
        'out-of-bounds': 'Date must be within the allowed range.',
        'invalid-input': "That date isn't valid.",
    };
    const min = new Date(2026, 0, 1);
    const max = new Date(2026, 11, 31);
    const [value, setValue] = React.useState<Date | null>(new Date(2026, 6, 1));
    const [error, setError] = React.useState<DateTimePickerErrorType>();
    const styles = /* css */ `
      .date-time-picker-controlled-example__control {
        max-width: 300px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <Field label="Select a date in 2026" hint={error ? undefined : value ? `Selected: ${value.toDateString()}` : 'No date selected'} required validationState={error ? 'error' : 'none'} validationMessage={error && validationMessages[error]}>
          <DateTimePicker className="date-time-picker-controlled-example__control" value={value} min={min} max={max} onChange={(_ev, data) => setValue(data.value)} onValidationResult={(_ev, data) => setError(data.error)}/>
        </Field>
      </>);
};

export default Controlled;