import * as React from 'react';
import { FC } from 'react';
//@ts-ignore
import BaseCheck from 'react-feather/dist/icons/check';

import Icon from 'kwai-icon';

import rgba from 'polished/lib/color/rgba';
import copy from 'copy-text-to-clipboard';
import styled from 'styled-components';
import message from 'components/message';
import { ButtonSwap } from './ButtonSwap';
import { get } from '../Playground/theme';

const textColor = get('colors.text', '#2D3747');
const Clipboard = styled(Icon).attrs(() => ({ name: 'Copy', size: 'small', color: '#B6BBC7' }))`
    &&& path {
        fill: #b6bbc7;
    }
`;
export const ActionButton = styled(ButtonSwap)`
    padding: 4px;
    background: transparent;
    font-size: 12px;
    text-transform: uppercase;
    transition: color 0.3s;

    &,
    & a {
        color: ${p => rgba(textColor(p), 0.4)};
    }

    &:hover,
    & a:hover {
        color: ${p => rgba(textColor(p), 0.7)};
    }
`;

const Check = styled(BaseCheck)`
    stroke: ${get('colors.primary')};
`;

interface ClipboardActionProps {
    content: string;
}

export const ClipboardAction: FC<ClipboardActionProps> = ({ content, ...props }) => (
    <ActionButton
        {...props}
        onClick={() => {
            message.success('代码已复制', 800);
            copy(content);
        }}
        swap={<Check width={17} />}
    >
        <Clipboard />
    </ActionButton>
);