// 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 Range = () => {
    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 [start, setStart] = React.useState<Date | null>(new Date(2026, 6, 1));
    const [end, setEnd] = React.useState<Date | null>(new Date(2026, 6, 10));
    const [startError, setStartError] = React.useState<DateTimePickerErrorType>();
    const [endError, setEndError] = React.useState<DateTimePickerErrorType>();
    const dayCount = start && end ? Math.round((end.getTime() - start.getTime()) / 86400000) + 1 : undefined;
    const styles = /* css */ `
      .date-time-picker-range-example__row {
        display: flex;
        gap: var(--spacingHorizontalM);
        align-items: flex-start;
      }

      .date-time-picker-range-example__control {
        max-width: 300px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="date-time-picker-range-example">
          <div className="date-time-picker-range-example__row">
            <Field label="Start date" validationState={startError ? 'error' : 'none'} validationMessage={startError && validationMessages[startError]}>
              <DateTimePicker className="date-time-picker-range-example__control" value={start} max={end ?? undefined} onChange={(_ev, data) => setStart(data.value)} onValidationResult={(_ev, data) => setStartError(data.error)}/>
            </Field>
            <Field label="End date" validationState={endError ? 'error' : 'none'} validationMessage={endError && validationMessages[endError]}>
              <DateTimePicker className="date-time-picker-range-example__control" value={end} min={start ?? undefined} onChange={(_ev, data) => setEnd(data.value)} onValidationResult={(_ev, data) => setEndError(data.error)}/>
            </Field>
          </div>
          <p>
            {dayCount !== undefined
            ? `${dayCount} day${dayCount === 1 ? '' : 's'} selected`
            : 'Select both dates'}
          </p>
        </div>
      </>);
};

export default Range;