import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';

import '../g.scss';

function ClickButton(props: IButtonAdd) {
  const {
    title = '',
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    type,
    showIcon = true,
    disabled = false,
    disabledStyle = {
      cursor: 'not-allowed',
      background: '#181A1F',
      color: '#787E84'
    },
    isError = false
  } = props;
  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div
          style={disabled ? disabledStyle : {}}
          className={
            type === 'haveStyle'
              ? 'zl-large-screen-setting-unit-click-btn'
              : type === 'addBtn'
              ? 'zl-large-screen-setting-unit-add-btn'
              : 'zl-large-screen-setting-unit-click-title'
          }
          onClick={() => {
            if (!disabled) {
              change?.(title, 'clickButton');
            }
          }}
        >
          {type === 'addBtn' && showIcon ? <Icon name="icon-tianjia" /> : <></>}
          <span>{title}</span>
        </div>
        {isError && disabled ? (
          <p className="zl-large-screen-setting-unit-click-error">
            * 内置轮廓暂不支持修改静态数据
          </p>
        ) : (
          <></>
        )}
      </Wrap>
    );
  }, [title, type, disabled]);

  return Dom;
}

export default ClickButton;

export interface IButtonAdd {
  title?: string | number;
  change?: Function;
  wrapStyle?: React.CSSProperties;
  type?: string;
  disabled?: boolean;
  showIcon?: boolean;
  disabledStyle?: React.CSSProperties;
  isError?: boolean;
}