import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import { Input } from 'antd';

import '../g.scss';
const { TextArea } = Input;

function LabelCode(props: ILabelCode) {
  const {
    value='',
    buttonText='',
    change,
    placeholderValue='',
    disabled=true,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-label-code-wrap">
          <TextArea
            disabled={disabled}
            placeholder={placeholderValue}
            style={{ height: 174 }}
            value={JSON.stringify(value, null, '\t')}
            draggable={false}
          />
          <span
            className="zl-large-sreen-code-button"
            onClick={() => change?.(value, buttonText)}
          >
            {buttonText}
          </span>
        </div>
      </Wrap>
    );
  }, [value, buttonText, placeholderValue, disabled]);

  return dom;
}

export default LabelCode;

export interface ILabelCode {
  value?: any;
  buttonText?: string;
  change?: Function;
  disabled?: boolean;
  placeholderValue?: string;
  wrapStyle?: React.CSSProperties;
}