import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';
import { Widget } from "./Widget";
import { Mandarin } from "flatpickr/dist/l10n/zh.js"
import { print } from '../printsdk/printIndex';
//   locale: Mandarin, 
import 'flatpickr/dist/themes/material_orange.css';
//   locale: Mandarin, 
// flatpickr.localize(Mandarin);
flatpickr.setDefaults({
  time_24hr: true,
  // 是否显示pm am
  locale: Mandarin,
  allowInput: true,

});
/**
 * @class ui.DateSelect
 * @since ui
 */
export class DateSelect extends Widget {

  /**
 * @hideconstructor
 * @param {string} [type] 日期选择类型，可选值为date|daterange|year|month|datetime|datetimerange。
 * @param {string} [placeholder] 占位符内容。
 * @param {string|string[]} [value] 选择具体的日期，格式为：yyyy-MM-dd|yyyy-MM-dd HH:mm
 * @param {Function} [onChange] 更新选择日期触发事件。
 * @param {Boolean} [disabled] 是否禁用日期组件。
 * @param {Object} [style] 组件样式。
 * @return ui.DateSelect
 */
  type: string;
  placeholder: string;
  value: string | string[];
  onChange: Function;
  disabled: boolean;
  constructor(
    {
      type = 'date',
      placeholder = '请输入数值',
      value = '',
      onChange = (value: string | string[]) => { print("选择的日期：" + value) },
      disabled = false,
      style = {}
    }: {
      type?: string,
      placeholder?: string, value?: string | string[], onChange?: Function, disabled?: boolean, style?: object
    }

  ) {
    super(null)
    this.type = type
    this.value = value
    this.placeholder = placeholder
    this.onChange = onChange
    this.disabled = disabled
    let render = this.render(this.type, this.placeholder, this.value, this.onChange, this.disabled)
    super(render, style)
    if (!(this instanceof DateSelect)) {
      return new DateSelect({ type, placeholder, value, onChange, disabled, style });
    }

  }

  private render(type: string, placeholder: string, value: string | string[], onChange: Function, disabled?: boolean) {
    // date | daterange | year | month | datetime | datetimerange。
    const form = document.createElement('form')
    form.classList.add('ui-datepicker-form')
    const inp = document.createElement('input') as HTMLInputElement;
    // inp.addEventListener('focus', () => {
    //   inp.style.border = '1px solid blue';
    // });
    inp.classList.add('ui-datepicker')
    inp.placeholder = placeholder
    disabled ? inp.disabled = disabled : false
    // switch (type) {
    //   case 'datetime':
    //     flatpickr(inp, {
    //       enableTime: true,
    //       dateFormat: "Y年m月d日 H:i",
    //       defaultDate: this.value,
    //       onChange: function (selectedDates, dateStr, instance) {
    //         onChange?.(dateStr);
    //       },
    //     });
    //     form.appendChild(inp);
    //     break;
    //   case 'daterange':
    //     const picker = flatpickr(inp, {
    //       mode: 'range',
    //       dateFormat: "Y年m月d日",
    //       defaultDate: value,
    //       onChange: function (selectedDates, dateStr, instance) {
    //         onChange?.(dateStr);
    //       },
    //     });
    if (type == 'datetime') {
      const datepicker = flatpickr(inp, {
        enableTime: true,
        dateFormat: "Y年m月d日 H:i",
        defaultDate: value,

        onChange: function (selectedDates, dateStr, instance) {
          onChange(dateStr)
        },
      });
      form.appendChild(inp)

    }
    if (type == 'daterange') {
      let rangevValue = [].concat(value)
      // console.log('啊实打实阿萨德的value', value);
      const datepicker = flatpickr(inp, {
        mode: 'range',
        dateFormat: "Y年m月d日",

        defaultDate: rangevValue,
        onChange: function (selectedDates, dateStr, instance) {
          onChange(dateStr)
        },
      });
      // datepicker.setDate(value);
      form.appendChild(inp)

    }
    if (type == 'date') {
      flatpickr(inp, {
        defaultDate: value,
        dateFormat: "Y年m月d日",
        onChange: function (selectedDates, dateStr, instance) {
          onChange(dateStr)
        },
      });
      form.appendChild(inp)

    }
    if (type == 'datetimerange') {
      let rangevValue = [].concat(value)
      // console.log('这是传入的value', value);
      // console.log('这是拷贝value', rangevValue);
      const datepicker = flatpickr(inp, {
        mode: "range",
        enableTime: true,

        dateFormat: "Y年m月d日 H:i",
        defaultDate: rangevValue,
        onChange: function (selectedDates, dateStr, instance) {
          onChange(dateStr)
        },
      });
      form.appendChild(inp)

    }
    if (type == 'year') {
      flatpickr(inp, {
        dateFormat: "Y年",

        defaultDate: value,
        onChange: function (selectedDates, dateStr, instance) {
          onChange(dateStr)
        },
      });
      form.appendChild(inp)

    }
    if (type == 'month') {
      flatpickr(inp, {
        dateFormat: "m月",
        defaultDate: value,

        onChange: function (selectedDates, dateStr, instance) {
          onChange(dateStr)
        },
      });
      form.appendChild(inp)
    }
    return form
  }
  /**
   * 设置日期选择器类型。
   * @param {string} type 日期选择器类型，可选值为date|daterange|year|month|datetime|datetimerange
   * @return ui.DateSelect
   */
  setType(type: string) {

    this.type = type;
    let render = this.render(this.type, this.placeholder, this.value, this.onChange, this.disabled)
    // Remove old elements
    while (this.el.firstChild) {
      this.el.removeChild(this.el.firstChild);
    }
    // Append new elements
    this.el.appendChild(render);

  }
  /**
 * 获取日期选择器类型。
 */
  getType() {
    return this.type
  }
  /**
   * 设置占位符内容。
   * @param {string} placeholder 
   * @returns  ui.DateSelect
   */
  setPlaceholder(placeholder: string) {
    this.placeholder = placeholder
    let render = this.render(this.type, this.placeholder, this.value, this.onChange, this.disabled)
    // Remove old elements
    while (this.el.firstChild) {
      this.el.removeChild(this.el.firstChild);
    }
    // Append new elements
    this.el.appendChild(render);
  }
  /**
* 返回占位符内容
*/
  getPlaceholder() {
    return this.placeholder
  }
  /**
   *  设置日期内容。
   * @param {string | string[]}value 
   * @return  ui.DateSelect
   */
  setValue(value: string | string[]) {
    this.value = value
    let render = this.render(this.type, this.placeholder, this.value, this.onChange, this.disabled)
    // Remove old elements
    while (this.el.firstChild) {
      this.el.removeChild(this.el.firstChild);
    }
    // Append new elements
    this.el.appendChild(render);
  }
  /**
* 返回日期内容
*/
  getValue() {
    return this.value
  }
  /**
   * 设置是否禁用。
   * @param {Boolean} disabled 
   * @return  ui.DateSelect
   */
  setDisabled(disabled: boolean) {
    this.disabled = disabled
    let render = this.render(this.type, this.placeholder, this.value, this.onChange, this.disabled)
    // Remove old elements
    while (this.el.firstChild) {
      this.el.removeChild(this.el.firstChild);
    }
    // Append new elements
    this.el.appendChild(render);
  }
  /**
 * 返回是否禁用。
 */
  getDisabled() {
    return this.disabled
  }
  /**
   * 设置日期选择器组件样式。
   * @param {Object} style 日期选择器样式。
   * 
   */
  setStyle(style: object) {
    for (let key in style) {
      if (key === 'position') {
        const pos = this.posDic[style[key]];
        if (pos) {
          (this.el as HTMLElement).classList.add('positioned', ...pos);
        }
      } else {
        this.styleDic.set(key, style[key]);
        (this.el as HTMLElement).style[key] = style[key];
      }
    }
    return this
  }
  /**
* 返回日期选择器样式
*/
  getStyle() {
    return this.styleDic.style
  }
}