import React from 'react';
import { Button, Drawer, Image } from 'antd';
import Emoji from './Emoji';

export default function EmojiSelect(props) {

  const { value, onChange } = props;
  const [open, setOpen] = React.useState(false);
  const [current, setCurrent] = React.useState(value);

  const handleChange = src => {
    setCurrent(src);
  }

  const onSubmit = () => {
    setOpen(false);
    onChange(current);
  }

  React.useEffect(() => {
    setCurrent(value);
  }, [value])

  return (
    <div>
      {
        value 
          ? <Image src={getRealPath(value)} style={{ width: '48px', height: '48px' }} preview={false} onClick={() => setOpen(true)} />
          : <Button type="primary" onClick={() => setOpen(true)}>选择图标</Button>
      }
      <Drawer
        title="图标选择"
        width='60vw'
        open={open}
        placement="right"
        extra={(
          <Button type="primary" onClick={onSubmit} disabled={!current || (value && value == current)}>
            确定
          </Button>
        )}
        onClose={() => setOpen(false)}
      >
        <Emoji onChange={handleChange} value={current} />
      </Drawer>
    </div>
  );
}