import React from 'react';
import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor';
import toast from 'react-hot-toast';
import styled from 'styled-components';

const Button = styled.button`
  white-space: nowrap;
  width: initial !important;
  display: flex;
  align-items: center;
  padding: 0 0.4rem !important;
`;

const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
  const { editorProps } = props;
  const handleClick = () => {
    const dom = editorProps.preview.current;
    dom?.focus();
    window.getSelection()?.removeAllRanges();
    let range = document.createRange();
    range.setStartBefore(dom?.firstChild!);
    range.setEndAfter(dom?.lastChild!);
    window.getSelection()?.addRange(range);
    document.execCommand(`copy`);
    window.getSelection()?.removeAllRanges();
    toast.success(<div>复制成功！去公众号编辑器复制吧！</div>);
  };
  return (
    <Button type="button" onClick={handleClick}>
      {props.command.icon} 复制
    </Button>
  );
};

export const copy: ICommand = {
  name: 'copy',
  keyCommand: 'copy',
  button: (command, props, opts) => <CopyView command={command} editorProps={{ ...props, ...opts }} />,
  icon: (
    <svg fill="currentColor" viewBox="0 0 24 24" height="16" width="16">
      <path d="M20 2H10a2 2 0 0 0-2 2v2h8a2 2 0 0 1 2 2v8h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" />
      <path d="M4 22h10c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2zm2-10h6v2H6v-2zm0 4h6v2H6v-2z" />
    </svg>
  ),
};