/*
 * @Author: your name
 * @Date: 2021-12-20 09:53:02
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\labelControlAndNumberInput\index.tsx
 */

import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import { returnClass } from '../unit';
import { Slider } from 'antd';

import '../g.scss';

function LabelControl(props: ILabelControl) {
  const {
    title = 'label',
    value,
    change,
    max,
    min,
    step,
    size = 'normal',
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className={returnClass(paddingSize)}>{title}</div>
        <div
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          <Slider
            style={{margin:'10px 7px'}}
            max={max ? max : null}
            min={min ? min : null}
            value={value}
            step={step||1}
            onAfterChange={(value) => {
              change?.(value, 'sliderblur');
            }}
            onChange={(value) => change?.(value, 'sliderchange')}
          />
        </div>
      </Wrap>
    );
  }, [title, value, paddingSize]);

  return dom;
}

export default LabelControl;

export interface ILabelControl {
  title?: string | number;
  value?: number;
  change?: Function;
  max?: number;
  min?: number;
  step?: number;
  size?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}