import React, { FunctionComponent, useState } from 'react';
import { ReactComponent as IconBgColor } from '../../../assets/svg/bgcolor.svg';
import { ReactComponent as IconClear } from '../../../assets/svg/clear.svg';
import { ColorResult, SketchPicker } from 'react-color';
import { isBlockActive, isMarkActive } from '@/common/transforms';
import { BLOCK_CODE, MARK_BG_COLOR } from '@/core/types';
import { ReactEditor, useSlate } from 'slate-react';
import './button-bg-color.less';
import { useLocale } from '@/core/context/locale-provider';
import classNames from 'classnames';
import { Range, Transforms } from 'slate';
import Dropdown from 'antd/lib/dropdown';
import 'antd/lib/dropdown/style';
import {DropdownButton} from "@/components";

interface OwnProps {}

type Props = OwnProps;

const ButtonBgColor: FunctionComponent<Props> = props => {
  const [visible, setVisible] = useState(false);
  const editor = useSlate();
  const {
    editor: { removeColor },
  } = useLocale();
  const [color, setColor] = useState<string>('#1890ff');
  const [mark, setMark] = useState<Range | null>(null);

  const handleColorChange = (v: ColorResult) => {
    setColor(v.hex);
    setVisible(false);
    if (mark) {
      ReactEditor.focus(editor);
      Transforms.select(editor, mark);
      if (isMarkActive(editor, MARK_BG_COLOR) && v.hex === '#fff') {
        editor.removeMark(MARK_BG_COLOR);
      } else {
        editor.addMark(MARK_BG_COLOR, v.hex);
      }
    }
  };

  const cleanColor = () => {
    editor.removeMark(MARK_BG_COLOR);
    setVisible(false);
  };

  const show = () => {
    const { selection } = editor;
    setMark(selection);
    setVisible(true);
  };

  const overlay = (
    <div className={classNames('fc-btn-bg-content', 'ant-dropdown-menu')} onMouseDown={e => e.stopPropagation()}>
      <div className="fc-btn-bg-header" onClick={cleanColor}>
        <IconClear />
        <span>{removeColor}</span>
      </div>
      <SketchPicker disableAlpha={true} color={color} onChange={handleColorChange} />
    </div>
  );

  return (
    <Dropdown
      trigger={['click']}
      overlay={overlay}
      visible={visible}
      overlayClassName="fc-btn-bg-overlay"
      onVisibleChange={setVisible}
      disabled={isBlockActive(editor, BLOCK_CODE)}
    >
      <DropdownButton width={45} onMouseDown={show}
                      disabled={isBlockActive(editor, BLOCK_CODE)}>
        <IconBgColor />
      </DropdownButton>
    </Dropdown>
  );
};

export {ButtonBgColor};