/** @format */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';

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

const BasicTitle = (props: BasicTitleProps) => {
  const {
    size,
    textStyle,
    text = '这是标题',
    textAlign = 'center',
    writingMode = 'horizontal-tb',
    data,
    letterSpacing = 0,
    isOverflow = false,
    url,
    isOpen,
  } = props;

  function getCurrentText() {
    const dataSourceText =
      data && data.length ? data[0] && data[0].value : null;
    return typeof dataSourceText !== 'undefined' && dataSourceText !== null
      ? dataSourceText
      : text;
  }

  const [currentText, setCurrentText] = useState(getCurrentText());

  useEffect(() => {
    setCurrentText(getCurrentText());
  }, [text, data]);
  let styleBase;
  if (writingMode === 'horizontal-tb') {
    styleBase = {
      width: '100%',
      height: 200,
      fontSize: '26px',
      color: '#999',
      display: 'flex',
      justifyContent: textAlign,
      alignItems: 'center',
      writingMode,
      letterSpacing,
    };
  } else {
    styleBase = {
      width: '100%',
      height: 200,
      fontSize: '26px',
      color: '#999',
      display: 'flex',
      justifyContent: 'center',
      alignItems:
        textAlign === 'center'
          ? 'center'
          : textAlign === 'flex-start'
          ? 'flex-end'
          : 'flex-start',
      writingMode,
      letterSpacing,
    };
  }
  const spanStyle = {
    overflow: isOverflow ? 'hidden' : 'unset',
    textOverflow: isOverflow ? 'ellipsis' : 'unset',
    whiteSpace: isOverflow ? 'nowrap' : 'unset',
    backgroundClip: 'unset',
    cursor: 'pointer',
  };

  const style = _.merge(styleBase, size, textStyle);

  function onHandleClick() {
    if (!url) return;
    if (url && isOpen) {
      return window.open(url);
    }
    window.location.href = url;
  }

  return (
    <div className="datav-wrapper" style={style}>
      <span style={spanStyle} onClick={onHandleClick}>
        {currentText}
      </span>
    </div>
  );
};

export default BasicTitle;