/** @format */

import React from 'react';
import { customMergeWith } from '../../../utils';
import { Container } from './styled';

/**
 * 科技风 - 标题
 * DEMO
 * https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/683e9483-6454-4242-9271-0cf45c35181f.png
 */

interface SCTitleBlockProps {
  /**
   * 容器大小
   */
  size?: { width: number; height: number };
  /**
   * 是否显示Icon
   */
  showIcon?: boolean;
  /**
   * 数据源，统一为数组格式
   */
  data?: DataItem[];
  // 主题
  theme?: {
    /**
     * 文本颜色
     */
    textColor?: string;
    /**
     * 组件主色
     */
    primaryColor?: string;
    secondColor?: string;
    thirdColor?: string;
    forthColor?: string;
  };
}

interface DataItem {
  title: string;
  enTitle?: string;
}

const SCTitleBlock = (props: SCTitleBlockProps) => {
  const { data, ...otherProps } = props;

  const defaultProps = {
    size: {
      width: 370,
      height: 60,
    },
    showIcon: true,
    theme: {
      textColor: '#FFFFFF',
      primaryColor: '#50E1A8',
      secondColor: '#FFFFFF',
      thirdColor: '#AAAAAA',
      forthColor: 'rgba(255,255,255,.24)',
    },
  };

  if (!(data && data.length)) {
    return null;
  }
  const currentData = data[0];
  const currentProps = customMergeWith(defaultProps, otherProps);

  return (
    <Container style={currentProps.size} theme={currentProps.theme}>
      <div className="content">
        {currentProps.showIcon ? (
          <div className="icon-box">
            <div className="triangle" />
            <div className="center-point" />
          </div>
        ) : null}
        <div className="title">
          {currentData.title}
          <span className="en_title">
            {currentData.enTitle ? '/' + currentData.enTitle : ''}
          </span>
        </div>
      </div>
      <div className="divider">
        <div className="divider-header" />
        <div className="divider-center" />
        <div className="divider-tail" />
      </div>
    </Container>
  );
};

export default SCTitleBlock;