import React, { FC } from 'react';
import styled from 'styled-components';
import SVG from 'react-inlinesvg';

import ShortenerOptions from './ShortenerOptions';
import TextInput from '../TextInput';
import Error from '../Error';

// TODO: types
interface Props {
  handleSubmit: any;
  isAuthenticated: boolean;
  domain: string;
  setShortenerFormError: any;
}

const ShortenerForm = styled.form`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  max-width: 100%;
`;

const Submit = styled.div`
  content: '';
  position: absolute;
  top: 0;
  right: 12px;
  width: 64px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  :hover svg {
    fill: #673ab7;
  }
  @media only screen and (max-width: 448px) {
    right: 8px;
    width: 40px;
  }
`;

const Icon = styled(SVG)`
  svg {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    margin-top: 2px;
    fill: #aaa;
    transition: all 0.2s ease-out;

    @media only screen and (max-width: 448px) {
      height: 22px;
      width: 22px;
    }
  }
`;

const ShortenerInput: FC<Props> = ({
  isAuthenticated,
  domain,
  handleSubmit,
  setShortenerFormError,
}) => (
  <ShortenerForm id="shortenerform" onSubmit={handleSubmit}>
    <TextInput
      id="target"
      name="target"
      placeholder="Paste your long URL"
      autoFocus
    />
    <Submit onClick={handleSubmit}>
      <Icon src="/images/send.svg" />
    </Submit>
    <Error type="shortener" />
    <ShortenerOptions
      isAuthenticated={isAuthenticated}
      setShortenerFormError={setShortenerFormError}
      domain={domain}
    />
  </ShortenerForm>
);

export default ShortenerInput;