// /** @format */

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

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

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

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

const defaultProps = {
  ordinary: {
    // 数值
    min: 0,
    max: 100,

    // 步幅
    step: 5,

    // 轨道
    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: 40,
    tooltipHeight: 24,
    tooltipPrefix: '',
    tooltipSuffix: '%',
    tooltipBGColor: '#6c6c6c',
    tooltipRadius: 6,
    tooltipFonts: {
      color: '#fff',
      fontFamily:
        "PingFangSC, 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif",
      fontSize: 12,
      fontWeight: 'normal' as const,
    },
  },
  size: {
    height: 30,
    width: 320,
  },
};

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

const SliderSingle: React.FC<IProps> = ({ size, ordinary, id = 'ss' }) => {
  const {
    min,
    max,
    step,
    tooltipPlacement,
    tooltipVisible,
    isCustomHandle,
    customHandle,
    tooltipWidth,
    tooltipHeight,
    tooltipPrefix,
    tooltipSuffix,
    tooltipPadding,
    tooltipBGColor,
    tooltipRadius,
    tooltipFonts,
  } = ordinary;
  const { color, fontFamily, fontSize, fontWeight } = tooltipFonts;
  const [stateValue, setStateValue] = useState((max - min) / 2);

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

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

  function onChange(val: number) {
    setStateValue(val);
    // 抛出滑块数值变化事件，
    debounceFun(val);
  }

  const handle: SliderProps['handle'] = props => {
    const { value, dragging, index, ...restProps } = props;
    return (
      <SliderTooltip
        prefixCls="rc-slider-tooltip"
        overlay={`${tooltipPrefix}${value}${tooltipSuffix}`}
        // 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={min}
          max={max}
          step={step}
          onChange={onChange}
          handle={handle}
        />
      </div>
    </Container>
  );
};

SliderSingle.defaultProps = defaultProps;

export default SliderSingle;