import * as React from 'react';
import { SFC } from 'react';
import { useConfig } from 'docz';
import lighten from 'polished/lib/color/lighten';
import Code from 'react-feather/dist/icons/code';
import styled, { css } from 'styled-components';
import Popover from 'components/popover';
import { get as themeGet } from './theme';
import { CodeSandboxLogo } from './CodeSandboxLogo';
import { ActionButton, ClipboardAction } from '../Editor/elements';

interface ActionsProps {
    theme: any;
    withRadius: boolean;
}

const borderColor = themeGet('colors.border');
const getActionsBg = (p: ActionsProps) => lighten(0.13, borderColor(p));

const Actions = styled.div<ActionsProps>`
    display: flex;
    justify-content: center;
    padding: 0 5px;
    background: ${getActionsBg};
`;

const actionStyle = css`
    padding: 3px 10px;
`;

const Action = styled(ActionButton)<React.ButtonHTMLAttributes<any>>`
    ${actionStyle};
`;

const Clipboard = styled(ClipboardAction)`
    ${actionStyle};
`;

export interface ActionsBarProps {
    code: string;
    showEditor: boolean;
    fullscreen: boolean;
    codesandboxUrl: string | null;
    onClickRefresh: () => void;
    onClickFullscreen: () => void;
    onClickEditor: () => void;
}

export const ActionsBar: SFC<ActionsBarProps> = ({ showEditor, code, onClickEditor }) => {
    const config = useConfig();

    return (
        <Actions withRadius={showEditor}>
            <Popover content="复制代码" placement="top" delay={1000}>
                <Clipboard content={code} />
            </Popover>
            <Popover placement="top" content={showEditor ? '关闭编辑器' : '显示编辑器'} delay={1000}>
                <Action onClick={onClickEditor}>
                    <Code width={15} />
                </Action>
            </Popover>
        </Actions>
    );
};