/** @format */

import 'rc-slider/assets/index.css';

import { createFromIconfontCN } from '@ant-design/icons';
import _ from 'lodash';
import moment from 'moment';
import Slider, { Handle, SliderTooltip } from 'rc-slider';
import { SliderProps } from 'rc-slider/lib/Slider';
import React, { useCallback, useEffect, useState } from 'react';

import { DispatchEvent } from '../../../utils';
import { AttrType, TimeType } from './data';
import { Container } from './styled';

const IconFont = createFromIconfontCN({
  scriptUrl: 'https://at.alicdn.com/t/font_1634782_ma1uuzhijxr.js',
});

const defaultProps = {
  data: {
    min: 20,
    max: 30,
    initValue: 6,
    step: 1,
  },
  ordinary: {
    dateFormat: 'YYYY年MM月DD日',
    picker: 'day' as const,

    // 轨道
    railBorderRadius: 2,
    railBgColor: '#555',

    // 轨迹
    trackColorLinear: false,
    trackBgColor: '#91d5ff',

    // 滑块
    handleSize: 50,
    // 自定义滑块
    isCustomHandle: true,
    customHandle: 'icon-huakuai01',
    // 默认滑块
    handleBGColor: '#1c2126',
    handleType: 'solid',
    handleRadius: 2,
    handleBorderSize: 2,
    handleColor: '#91d5ff',

    // 提示文字
    tooltipPlacement: 'top' as const,
    tooltipVisible: true,
    tooltipPadding: 20,
    tooltipWidth: 120,
    tooltipHeight: 24,
    tooltipBGColor: '#6c6c6c',
    tooltipRadius: 6,
    tooltipFonts: {
      color: '#fff',
      fontFamily:
        "PingFangSC, 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif",
      fontSize: 12,
      fontWeight: 'normal' as const,
    },
  },
  size: {
    width: 320,
    height: 35,
  },
};

const unitObj: TimeType = {
  day: 'days',
  month: 'months',
  year: 'years',
};

type IProps = AttrType & typeof defaultProps;
// 时间滑块值变化事件
const EVENT_Slider_Single_Date_Change = 'event-slider-single-date-change';

const SliderSingleDate: React.FC<IProps> = ({
  size,
  ordinary,
  data,
  id = 'sd',
}) => {
  const {
    dateFormat,
    picker,
    tooltipPlacement,
    tooltipVisible,
    isCustomHandle,
    customHandle,
    tooltipWidth,
    tooltipHeight,
    tooltipPadding,
    tooltipBGColor,
    tooltipRadius,
    tooltipFonts,
  } = ordinary;
  const { color, fontFamily, fontSize, fontWeight } = tooltipFonts;
  const { min, max, initValue, step } = data;

  const [stateValue, setStateValue] = useState<number>(initValue);

  const marks: Record<number, moment.Moment> = {};
  for (let index = 0; index < min + max + 1; index++) {
    marks[index] = moment().add(index - min, unitObj[picker]);
  }

  useEffect(() => {
    setStateValue(min + initValue);
  }, [min, initValue]);

  //在函数组件中用useCallback来确保不同生命周期内函数引用不变
  const changeFun = useCallback(newData => {
    DispatchEvent(id, EVENT_Slider_Single_Date_Change, {
      value: newData,
    });
  }, []);

  const debounceFun = useCallback(
    _.debounce(changeFun, 500, {
      leading: false,
      trailing: true,
    }),
    [changeFun],
  );

  function onChange(val: number) {
    //具体的业务逻辑
    setStateValue(val);
    // 时间格式重组
    let newData = '';
    const newVal = marks[val];
    if (picker === 'day') {
      newData = moment(newVal).format('YYYY-MM-DD');
    } else if (picker === 'month') {
      newData = moment(newVal).format('YYYY-MM');
    } else if (picker === 'year') {
      newData = moment(newVal).format('YYYY');
    }
    debounceFun(newData);
  }

  const handle: SliderProps['handle'] = props => {
    const { value, dragging, index, ...restProps } = props;
    return (
      <SliderTooltip
        prefixCls="rc-slider-tooltip"
        overlay={`${moment(marks[value]).format(dateFormat)}`}
        // overlayStyle={}
        overlayInnerStyle={{
          padding: 'unset',
          boxShadow: 'unset',
          width: tooltipWidth,
          height: tooltipHeight,
          lineHeight: tooltipHeight + 'px',
          backgroundColor: tooltipBGColor,
          borderRadius: tooltipRadius,
          color: color,
          fontFamily: fontFamily,
          fontSize: fontSize,
          fontWeight: fontWeight,
        }}
        visible={dragging || tooltipVisible}
        placement={tooltipPlacement}
        key={index}
        overlayClassName="edata-slider-tooltip"
      >
        <Handle value={value} {...restProps}>
          {isCustomHandle && <IconFont type={customHandle} />}
        </Handle>
      </SliderTooltip>
    );
  };

  return (
    <Container ordinary={ordinary} size={size} id={id}>
      <div style={{ width: size?.width }}>
        <Slider
          value={stateValue}
          min={0}
          max={min + max}
          step={step}
          onChange={onChange}
          handle={handle}
        />
      </div>
    </Container>
  );
};

SliderSingleDate.defaultProps = defaultProps;

export default SliderSingleDate;