import React, { useEffect, useMemo, useState } from 'react';

const LargeScreenComponentTabs: React.FC<ILargeScreenComponentTabs> = (
  props
) => {
  const { value, list = [], change, styles } = props;
  const [defaultValue, setDefaultValue] = useState(value); //默认选中值

  useEffect(() => {
    setDefaultValue(value);
  }, [value]);
  //tabs的点击事件
  const changeTabs = (item: string) => {
    setDefaultValue(item);
    change?.(item);
  };

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-component-tabs" style={{ ...styles }}>
        <div className="zl-large-screen-component-tabs-wrapper">
          {list?.length > 0 &&
            list?.map((item, index) => {
              return (
                <div
                  key={index}
                  className="zl-large-screen-component-tabs-item"
                  onClick={() => {
                    changeTabs(item);
                  }}
                >
                  <span
                    className={`zl-large-screen-component-tabs-item-small ${
                      defaultValue === item ? 'zl-large-screen-tas-active' : ''
                    }`}
                  >
                    {item}
                  </span>
                </div>
              );
            })}
        </div>
      </div>
    );
  }, [defaultValue, list, styles, value]);

  return Dom;
};

export default LargeScreenComponentTabs;

export interface ILargeScreenComponentTabs {
  value?: string;
  list?: string[] | number[];
  change?: Function;
  styles?: React.CSSProperties;
}