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

import '../g.scss';

function LabelSwitch2(props: IRadioGroup) {
  const {
    title,
    selectList = [],
    change,
    value,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    paddingSize,
    padding
  } = props;

  const LabelSwitch = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        {title ? (
          <div
            className={returnClass(paddingSize ? paddingSize : 'normal')}
            style={{ marginRight: paddingSize ? paddingSize : padding }}
          >
            {title}
          </div>
        ) : (
          <></>
        )}
        <div className="zl-large-screen-switch2-wrap">
          <div className="zl-large-screen-switch2">
            {selectList.map((item) => {
              return (
                <span className={item?.key === value ? 'active' : ''} onClick={() => {change(item?.key)}}>
                  {item?.name}
                </span>
              );
            })}
          </div>
        </div>
      </Wrap>
    );
  }, [title, value]);

  return LabelSwitch;
}

export default LabelSwitch2;

export interface IRadioGroup {
  title: string;
  selectList: ISelectList[];
  wrapStyle?: React.CSSProperties;
  change?: Function;
  value?: string;
  paddingSize?: string;
  padding: number;
}

export interface ISelectList {
  key: number | string;
  name: string | number;
  type: string;
  names?: string;
}