/*
 * @Author: your name
 * @Date: 2021-12-16 14:37:12
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\textInput\index.tsx
 */

import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import { Switch } from 'antd';
import { returnClass } from '../unit';
import '../g.scss';

function LableSwitch(props: ILabelTextInput) {
  const {
    title = 'label',
    value = '',
    change,
    size = 'large',
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' },
    attrKey
  } = 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'
          }
        >
          <Switch
            onChange={(checked) => change?.(title, checked)}
            checked={attrKey === 'zoomEnable' ? !value : value}
            size="small"
          />
        </div>
      </Wrap>
    );
  }, [title, value, paddingSize]);

  return Dom;
}

export default LableSwitch;

export interface ILabelTextInput {
  title?: any;
  value?: string | number;
  change?: Function;
  size?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
  attrKey?: string;
}