import React, { Component } from 'react';

import { Button, Drawer } from "@alifd/next";

interface InputDrawerSetterProps {
  // 当前值
  value: string;
  // 默认值
  defaultValue: string;
  // setter 唯一输出
  onChange: (val: string) => void;
  // AltStringSetter 特殊配置
  placeholder: string;

}

export default class extends Component<InputDrawerSetterProps> {

  constructor(props) {
    super(props);
    // 在构造函数中初始化状态
    this.state = {
      visible: false, // 初始化为 false
    };

  }

  componentDidMount() {
    const { onChange, value, defaultValue, } = this.props;
    if (value == undefined && defaultValue) {
      onChange(defaultValue);
    }
  }

  onOpen = () => {
    this.setState({
      visible: true,
    });
  };
  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { onChange, value } = this.props;

    return (
      <div>
        <Button type="primary" onClick={this.onOpen}>
          编辑
        </Button>
        <Drawer
          v2
          title={`请输入`}
          placement="right"
          width={400}
          visible={this.state.visible}
          onClose={this.onClose}
          bodyStyle={{ height: "95%" }}
        >
          <textarea
            style={{ width: "100%", height: "100%" }}
            placeholder="在这里输入你的代码..."
            value={value}
            onChange={(e) => onChange(e.target.value)}
          ></textarea>
          {/* <Input.TextArea
            style={{ width: "100%", height: 1000 }}
            placeholder="TextArea"
            aria-label="TextArea"
            value={value}
            rows={66}
            // placeholder={placeholder || ""}
            onChange={(val: any) => onChange(val)}
          ></Input.TextArea> */}
        </Drawer>
      </div >
    );
  }
}