import React, { useMemo } from 'react';

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

function LabelNumberStyle(props: ILabelNumberStyle) {

  const {
    title = 'label',
    value = '',
    change,
    size = 'normal',
    list=[],
    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'
          }
        >
          {Array.isArray(list) &&
            list?.length > 0 &&
            list?.map((item) => {
              if (item.type === 'round') {
                return (
                  <div
                    key={item?.key}
                    className={`${
                      item.key === value
                        ? 'zl-large-screen-number-roud-active'
                        : 'zl-large-screen-number-roud'
                    }`}
                    onClick={() => change?.(item?.key)}
                  >
                    {item?.value}
                  </div>
                );
              } else {
                return (
                  <div
                    key={item?.key}
                    className={`${
                      item.key === value
                        ? 'zl-large-screen-number-active'
                        : 'zl-large-screen-number'
                    }`}
                    onClick={() => change?.(item.key)}
                  >
                    {item?.value}
                  </div>
                );
              }
            })}
        </div>
      </Wrap>
    );
  }, [title, value, paddingSize, list]);

  return Dom;
}

export default LabelNumberStyle;

export interface ILabelNumberStyle {
  title?: any;
  value?: string;
  change?: Function;
  size?: string;
  list?: IList[];
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}
export interface IList {
  key: string;
  value?: string;
  type?: string;
}