/** @format */
import './index.css';

import classnames from 'classnames';
import _, { merge } from 'lodash';
import {} from 'react';
import React from 'react';

interface TextLabel {
  size?: Record<string, any>;
  [key: string]: any;
}

const TextLabel = (props: TextLabel) => {
  const {
    data,
    customConfig,
    size = {
      width: 300,
      height: 200,
    },
    globalConfig = {
      fontFamily: '微软雅黑',
      autoLayout: true,
      rowNum: 1,
      columnNum: 1,
      gridColumnGap: 0,
      gridRowGap: 0,
    },
    defaultConfig = {
      background: '#35629d',
      fontSize: '',
      color: '#fff',
      fontWeight: 'normal',
      fontFamily: '微软雅黑',
    },
  } = props;

  const {
    rowNum,
    columnNum,
    gridColumnGap,
    gridRowGap,
    autoLayout,
  } = globalConfig;
  const { width, height } = size;

  const childrenLabelStyle = (type: string) => {
    const rowSwt = {
      marginRight: !autoLayout && gridColumnGap,
      marginBottom: !autoLayout && gridRowGap,
    };

    const defaultStyle = { ...defaultConfig, ...rowSwt };
    const customStyle = customConfig.find((v: any) => v.type === type);
    if (type && customStyle) {
      return _.merge(defaultStyle, customStyle);
    } else {
      return defaultStyle;
    }
  };

  const globalStyle = _.merge(
    {
      display: 'grid',
      gridTemplateColumns: `repeat(${columnNum}, ${width / columnNum}px)`, // 宽
      gridTemplateRows: `repeat(${rowNum}, ${height / rowNum}px)`, // 高
    },
    size,
  );

  const globalLayout = !autoLayout ? globalStyle : size;

  return (
    <div className="edata-textlabel" style={globalLayout}>
      {data &&
        data.length > 0 &&
        data.map((val: any, index: number) => {
          return (
            <div
              key={index}
              style={childrenLabelStyle(val.type)}
              className={classnames({
                custom_autoLayout: autoLayout,
                text_content: !autoLayout,
              })}
            >
              <span className="text_exceeds">{val.content}</span>
            </div>
          );
        })}
    </div>
  );
};

export default TextLabel;