import React, { useMemo } from 'react';

import '../g.scss';
import Icon from 'src/components/Icon/index';
import defaultImg from './story_default.svg';

function LabelScreenshot(props: ILabelTextInput) {
  const {
    title = 'label',
    value,
    change,
    size = 'large',
    defaultButtonText = '',
    buttonText = '',
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Dom = useMemo(() => {
    return (
      <div
        className="zl-large-screen-unit-lable-screenshot-wrap"
        style={wrapStyle}
      >
        <div className="zl-large-screen-unit-lable-screenshot-showimg">
          <img src={value ? value : defaultImg} alt="缩略图" />
        </div>

        {buttonText ? (
          <div className="zl-large-screen-unit-lable-screenshot-btns">
            <span
              className="zl-large-screen-label-upload-cover"
              onClick={() => change?.('cover')}
            >
              <Icon name="icon-jianqie" />
              <span>{buttonText}</span>
            </span>
            <span
              className="zl-large-screen-label-upload-button"
              onClick={() => change?.('default')}
            >
              {defaultButtonText}
            </span>
          </div>
        ) : (
          <></>
        )}
      </div>
    );
  }, [title, value, defaultButtonText, buttonText, paddingSize]);

  return Dom;
}

export default LabelScreenshot;

export interface ILabelTextInput {
  title?: any;
  value?: string;
  change?: Function;
  size?: string;
  defaultButtonText?: string;
  buttonText?: string;
  paddingSize?: string;
  wrapStyle: React.CSSProperties;
}