import * as React from "react";
import { DatePicker as AntDatePicker } from "antd";
import * as dayjs from 'dayjs';
import { SizeType } from "antd/es/config-provider/SizeContext";

export interface IMonthPickerProps {
    /** Allow deselecting */
    allowClear?: boolean;

    /** Disable item */
    disabled?: boolean;

    /** Specify dates that cannot be selected */
    disabledDate?: (current: dayjs.Dayjs | null) => boolean;

    /** Displayed in the input box and the selected date when the picker is opened */
    defaultValue?: dayjs.Dayjs;

    /** The selected date when the picker is opened. Overridden by defaultValue */
    defaultPickerValue?: dayjs.Dayjs;

    /** Input placeholder */
    placeholder?: string;

    /** Selected month */
    value?: dayjs.Dayjs;

    /** Called on month change */
    onChange?: (date: dayjs.Dayjs | null, dateString: string | string[]) => void;

    /** Input width. Default is "100%" */
    width?: number | string;

    /** Used to remove the border. Defaults to true */
    bordered?: boolean;

    /** Format of the selected month.  Defaults to MMM YYYY */
    format?: string;

    /** Default is normal */
    size?: "dense" | "normal";
}

/**
 * @beta
 */
const MonthPicker: React.FC<IMonthPickerProps> = (props: IMonthPickerProps) => {
    const { width = "100%", placeholder = "", format = "MMM YYYY", size, ...validProps } = props;
    const style = { width };

    let sizeType: SizeType = 'middle';
    if (size && size == "dense") {
        sizeType = 'small';
    }

    return (
        <AntDatePicker.MonthPicker {...validProps} changeOnBlur format={format} placeholder={placeholder} style={style} size={sizeType}>
        </AntDatePicker.MonthPicker>
    );
};

export default MonthPicker;