import * as React from 'react';
import styled from 'styled-components';
import Colors from '../Colors';
import { styledByMediaQuery } from '../utils/styles';

export const Label = styled.label`
  border: 1px solid ${Colors.line};
  display: inline-block;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  width: 100%;
  ${styledByMediaQuery(`width: 308px;`)}

  .label__title {
    font-size: 16px;
    color: ${Colors.lochmara};
    margin: 16px 0 10px;
  }

  .label__description {
    font-size: 10px;
    color: ${Colors.support};
    margin: 0;
    &:last-of-type {
      margin-bottom: 6px;
    }
  }

  svg {
    position: relative;
    top: 3px;
    height: 16px;
    fill:none;
    stroke: ${Colors.lochmara};
    stroke-miterlimit: 10;
    stroke-width: 2px;
    margin-left: 6px;
  }

  .link-arrow-elements {
      fill: none;
      transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
    }

    &:hover .link-arrow-elements {
      stroke: ${Colors.regalBlue};
      transform: translateX(3px);
    }
`;
export const Input = styled.input.attrs({
  type: 'file',
})`
  opacity: 0;
`;

const { Fragment } = React;
interface IProps {
  onChange: (any?: any) => any;
  formats: string;
  maxSize: string|number;
  id: string;
}

export default ({ onChange, formats, maxSize, id }: IProps) => (
  <Fragment>
    <Label htmlFor={id}>
      <svg className='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' transform='rotate(270)'>
        <polyline className='link-arrow-elements' points='12.35 19.71 22 10.22 12.35 0.71'/>
        <line className='link-arrow-elements' x1='22' y1='10.22' y2='10.22'/>
        <line className='link-arrow-elements' x1='24' x2='24' y1='24' y='10' />
      </svg>
      <h5 className='label__title'>ARRASTE O ARQUIVO OU CLIQUE</h5>
      <p className='label__description'>Formato {formats}</p>
      <p className='label__description'>Tamano máximo {maxSize}</p>
      <p className='label__description'>Dimensão padrão 220x60</p>
    </Label>
    <Input id={id} onChange={({ target }) => onChange(target.files)} />
  </Fragment>
);