import { CSSProperties } from 'glamor';
import copy from 'copy-to-clipboard';
import { observer } from 'mobx-react';
import React, { ButtonHTMLAttributes } from 'react';
import { MdContentCopy } from 'react-icons/md';
import { Hint, HintPosition } from '../../components/common/hint/Hint';
import { useApphouse } from '../../context/useApphouse';
import {
  BoxSizeStyles,
  ButtonStyleVariant
} from '../../styles/defaults/themes.interface';
import { Button } from '../Button';
import { Feedback } from '../../models/Feedback';
import { mergeStyles } from '../../styles/mergeStyles';

export interface ButtonSelectOption {
  label: string;
  value: string;
}

export interface ButtonCopyToClipboardProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: keyof ButtonStyleVariant;
  content: string;
  size?: keyof BoxSizeStyles;
  styleOverwrites?: CSSProperties;
  hintPosition?: HintPosition;
  feedback?: Feedback;
  label?: string;
}

export const ButtonCopyToClipboard: React.FC<ButtonCopyToClipboardProps> =
  observer((props: ButtonCopyToClipboardProps) => {
    const {
      variant = 'primary',
      styleOverwrites,
      hintPosition = 'bottom',
      content,
      size = 'm',
      label
    } = props;
    const {
      theme,
      app: { feedback }
    } = useApphouse();
    const { tokens } = theme;
    const localStyles = mergeStyles({}, styleOverwrites);

    return (
      <Hint hint="Copy code to clipboard" position={hintPosition}>
        <Button
          variant={variant}
          size={size}
          styleOverwrites={localStyles}
          title="Copy to clipboard"
          onClick={() => {
            if (content && typeof content === 'string') {
              copy(content);
              feedback.setFeedback({
                message: 'Copied to clipboard',
                variant: 'info'
              });
            }
          }}
        >
          <MdContentCopy size={tokens.spacings.l} />
          {label && label}
        </Button>
      </Hint>
    );
  });