import React from 'react';
import cx from 'classnames';
import { DatePickerBase } from '../dateRangePicker/datePickerBase';
import type { DatePickerProps } from '../dateRangePicker/types';

const CLASS_NAME = 'SuiteDateSinglePicker';
const DEFAULT_CUSTOM_RANGE = {
    start: '1900-01-01',
    end: new Date(new Date().getFullYear() + 10, 11, 31).toISOString().slice(0, 10),
};

/**
 * DatePicker provides a calendar view and allows user to select a single date.
 *
 * @type molecule
 * @status live
 * @tags form-elements, selects
 */
export const DatePicker: React.FC<DatePickerProps> = ({
    onChange,
    selectedValue,
    className,
    testId = CLASS_NAME,
    isClearable = true,
    customDateRange = DEFAULT_CUSTOM_RANGE,
    ...props
}) => (
    <DatePickerBase
        {...props}
        customDateRange={customDateRange}
        className={cx(className, CLASS_NAME)}
        testId={testId}
        isClearable={isClearable}
        onChange={(dates) => onChange(dates?.start)}
        isRange={false}
        selectedValue={selectedValue ? { start: selectedValue, end: '' } : undefined}
    />
);