import React, { useState } from "react";
import styled, { keyframes } from "react-emotion";

const useForm = cb => {
  const [values, setValues] = useState({});

  const handleSubmit = event => {
    if (event) event.preventDefault();
    if (cb && typeof cb === "function") cb(values);
  };

  const handleChange = event => {
    event.persist();
    setValues(values => ({
      ...values,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleChange,
    handleSubmit,
    values
  };
};

const fadeIn = keyframes`
  from {
    opacity: 0;
  } 

  to {
    opacity: 1
  }
`;

const Button = styled.button``;
const Container = styled.div`
  padding: 0 1.7rem 1rem 1.7rem;
  animation: ${fadeIn} 200ms ease-in-out;
`;
const Form = styled.form`
  margin-top: 1rem;
`;

const FieldWrap = styled.div`
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
  align-items: baseline;
`;

const Input = styled.input`
  background: white;
  border: 1px solid black;
  border-radius: 2px;
  padding: 0.5rem;
  margin-right: 0.5rem;
`;

const Label = styled.label`
  text-align: right;
`;
const LabelText = styled.span`
  margin-right: 0.5rem;
  font-size: 0.875rem;
`;
const SharedIdCopy = styled.p`
  color: #777777;
  font-size: 0.875rem;
  line-height: 16px;
  margin: 1rem 0;
`;

const Submit = styled(Button)`
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.5rem;
  min-width: 100px;
`;
const CustomCodeForm = ({ onSubmit }) => {
  const { handleChange, handleSubmit, values } = useForm(onSubmit);

  return (
    <Container>
      <Form
        onSubmit={e => {
          e.preventDefault();
          handleSubmit();
        }}
      >
        <FieldWrap>
          <Label htmlFor="subId1">
            <LabelText>Sub Id 1</LabelText>
          </Label>
          <Input name="subId1" onChange={handleChange} value={values.subId1} />
          <Label htmlFor="subId2">
            <LabelText>Sub Id 2</LabelText>
          </Label>
          <Input name="subId2" onChange={handleChange} value={values.subId2} />
          <Label htmlFor="subId3">
            <LabelText>Sub Id 3</LabelText>
          </Label>
          <Input name="subId3" onChange={handleChange} value={values.subId3} />
          <Label htmlFor="sharedId">
            <LabelText>Shared Id</LabelText>
          </Label>
          <Input
            name="sharedId"
            onChange={handleChange}
            value={values.sharedId}
          />
        </FieldWrap>
        <SharedIdCopy>
          For Shared ID, the partner program can also see this value in their
          reporting
        </SharedIdCopy>
        <Submit variant="add" type="submit">
          GENERATE URL
        </Submit>
      </Form>
    </Container>
  );
};

export default CustomCodeForm;