import * as React from "react";
import { DatePicker as AntDatePicker } from "antd";
import * as dayjs from 'dayjs';
import intlService, { DateTimeFormat } from '@strata/intl/lib';
import enUSLocale from 'antd/lib/date-picker/locale/en_US';
import enGBIELocale from 'antd/lib/date-picker/locale/en_GB';
import ArrowRightOutlined from "@ant-design/icons/ArrowRightOutlined";
import { SizeType } from "antd/es/config-provider/SizeContext";
import { RangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';

export type RangeValue = RangeValueType<dayjs.Dayjs>;

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

  /** Allow start or end input leave empty */
  allowEmpty?: [boolean, boolean];

  /** Get focus and open the date picker on load */
  autoFocus?: boolean;

  /** Disable item */
  disabled?: [boolean, 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?: RangeValue;

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

  /** Format string for date.  L for short date, ll for long date string.  Defaults to ll for date picker. */
  format?: "L" | "ll" | string;

  /** Input placeholder */
  placeholder?: [string, string];

  /** Selected date */
  value?: RangeValue;

  /** Preset ranges for quick selection */
  ranges?: Record<string, [dayjs.Dayjs, dayjs.Dayjs] | (() => [dayjs.Dayjs, dayjs.Dayjs])>;

  /** Called on date change */
  onChange?: (values: RangeValue, formatString: [string, string]) => void;

  /** Called when input gains focus */
  onFocus?: React.FocusEventHandler<HTMLInputElement>;

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

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

  /** To determine the size of the input box.  Defaults to normal */
  size?: "dense" | "normal" | "large";

  /** Picker type.  Defaults to date */
  picker?: "date" | "week" | "month" | "quarter" | "year";
}


/**
 * @beta
 */
const RangePicker: React.FC<IRangePickerProps> = (props: IRangePickerProps) => {
  let { width = "100%", placeholder = ["", ""], autoFocus = false, format, picker = 'date', allowClear = false, size = "normal", onFocus, onChange, ...validProps } = props;
  const style = { width };

  //get the locale from strata/intl service and use that to configure datepicker formatting
  const language = (intlService.getCulture() || 'en-US');
  const locale = language === 'en-GB' ? enGBIELocale : language === 'en-IE' ? enGBIELocale : enUSLocale;

  if (picker === 'date') {
    // need to get actual format string because ant doesn't understand ll and L
    if (format === 'll' || format === 'L' || format == null) {
      const dateFormat: DateTimeFormat = (format === 'L') ? 'date' : 'dateLong';
      format = intlService.getDateFormatString(dateFormat);
    }
  }
  if (picker === 'month' && format == null) {
    format = 'MM/YYYY';
  }

  // default open when auto focus is set
  Object.assign(validProps, {
    autoFocus: autoFocus,
    allowClear: allowClear,
    defaultOpen: autoFocus // internal rc-datepicker prop
  });

  let sizeType: SizeType = 'middle';
  if (size != "normal") {
    sizeType = size === 'dense' ? "small" : "large";
  }

  return (
    <AntDatePicker.RangePicker
      {...validProps}
      onFocus={(e) => onFocus && onFocus(e as React.FocusEvent<HTMLInputElement>)}
      onChange={(dates, dateString) => onChange && onChange(dates as RangeValue, dateString)}
      picker={picker}
      format={format}
      placeholder={placeholder}
      style={style}
      separator={<ArrowRightOutlined></ArrowRightOutlined>}
      size={sizeType}
      locale={locale} >
    </AntDatePicker.RangePicker>
  );
};

export default RangePicker;