import React, { useEffect } from 'react'
import { Tabs, Input } from 'antd'
import { useModel } from 'umi'

export default function Remark() {
  const { selectedCell } = useModel("mindmap.mindMapModel");
  const [value, setValue] = React.useState("");
  const [disabled, setDisabled] = React.useState(true);

  useEffect(() => {
    if(selectedCell.length === 1 && selectedCell[0].isNode()) {
      setValue(selectedCell[0].data.remark || "");
      setDisabled(false);
    } else {
      setDisabled(true);
    }
  }, [selectedCell]);

  const handleInput = (val: string) => {
    selectedCell[0].setData({
      remark: val
    });
    setValue(val);
  };

  return (
    <Tabs items={[
      {
        key: '1',
        label: '备注',
        children: <div className='px-16px'>
          <div className='text-12px color-#666' style={{opacity: disabled ? 0.8 : 1}}>点击编辑备注</div>
          <Input.TextArea
            style={{
              height: 'calc(100vh - 100px)',
              background: '#fffef2'
            }}
            disabled={disabled}
            value={value}
            onChange={(e) => handleInput(e.target.value)}
            autoFocus
          />
        </div>
      }
    ]}/>
  )
}
