import * as React from 'react';
import { SFC } from 'react';
import Smartphone from 'react-feather/dist/icons/smartphone';
import Tablet from 'react-feather/dist/icons/tablet';
import Monitor from 'react-feather/dist/icons/monitor';
import styled from 'styled-components';

import { ActionButton } from '../Editor/elements';
import { get } from './theme';

const Wrapper = styled.div`
    position: absolute;
    top: 10px;
    left: 50%;
    margin-bottom: 5px;
    transform: translateX(-50%);
`;

const Buttons = styled.div`
    display: flex;
    background: ${get('colors.background')};
    border: 1px solid ${get('colors.border')};
    border-radius: ${get('radii')};
    padding: 3px 5px;
`;

export interface ResizeProps {
    onChangeSize: (width: string, height: string) => void;
}

export const ResizeBar: SFC<ResizeProps> = ({ onChangeSize }) => (
    <Wrapper>
        <Buttons>
            <ActionButton onClick={() => onChangeSize('360px', '640px')} title="Smartphone">
                <Smartphone width={20} />
            </ActionButton>
            <ActionButton onClick={() => onChangeSize('768px', '1024px')} title="Tablet">
                <Tablet width={20} />
            </ActionButton>
            <ActionButton onClick={() => onChangeSize('1366px', '1024px')} title="Monitor">
                <Monitor width={20} />
            </ActionButton>
        </Buttons>
    </Wrapper>
);