// @flow
import React from "react";
import styled from "styled-components";
import Button from "../ui/framed-button";
import { ModalButtonContainer } from "../ui/button-container";
import { Header, Message } from "../ui/text";
import { ModalContent } from "../modal";
import { FormInput, FormGroup } from "../ui/pub-input";
import { Formik } from "formik";
import to from "await-to-js";
import Api from "../../util/api";

const NewDocumentContainer = styled(ModalContent)`
  width: 400px;
`;

type Props = {
  onDismiss: Function,
};
type State = {
  name: string,
  width: number,
  height: number,
  formValid: boolean,
};
export default class NewDocumentDialog extends React.Component<Props, State> {
  state = {
    name: "New Document",
    width: 8.5,
    height: 11.0,
    formValid: true,
  };

  validateForm = () => {
    const errors = {};
    return errors;
  };

  createNewDocument = async (documentAttrs: Object) => {
    const payload = { ...documentAttrs, shapes: [] };
    const [err] = await to(Api.POST("documents", payload));
    if (err) {
      return;
    }
    this.props.onDismiss();
  };

  render() {
    const { onDismiss } = this.props;
    return (
      <NewDocumentContainer>
        <Header>Create New Document</Header>
        <Message>
          Specify the name, width, and height of your new document.
        </Message>
        <Formik
          initialValues={{
            name: "New Document",
            width: 8.5,
            height: 11,
          }}
          validate={this.validateForm}
          onSubmit={values => this.createNewDocument(values)}
          render={({ values, handleChange, handleSubmit }) => (
            <form onSubmit={handleSubmit}>
              <FormGroup>
                <FormInput
                  name="name"
                  onChange={handleChange}
                  value={values.name}
                  displayName="Name"
                />
              </FormGroup>
              <FormGroup>
                <FormInput
                  name="height"
                  label="inches"
                  onChange={handleChange}
                  value={values.height}
                  displayName="Height"
                />
                <FormInput
                  name="width"
                  label="inches"
                  onChange={handleChange}
                  value={values.width}
                  displayName="Width"
                />
              </FormGroup>
              <ModalButtonContainer>
                <Button marginRight type="submit">
                  Create Document
                </Button>
                <Button type="button" onClick={onDismiss}>
                  Close
                </Button>
              </ModalButtonContainer>
            </form>
          )}
        />
      </NewDocumentContainer>
    );
  }
}

@@ -1445,42 +1445,31 @@
     
-width: 8.5,%0A            height: 11
+orientation: %22portrait%22
 ,%0A  
@@ -1552,30 +1552,19 @@
  =%3E 
-this.createNewDocument
+console.log
 (val
@@ -1957,37 +1957,33 @@
                %3C
-FormI
+i
 nput%0A           
@@ -1995,22 +1995,58 @@
   name=%22
-height
+orientation%22%0A                  type=%22radio
 %22%0A      
@@ -2053,37 +2053,39 @@
             
-label=%22inches
+value=%22portrait
 %22%0A          
@@ -2126,37 +2126,39 @@
                 
-value
+checked
 =%7Bvalues.height%7D
@@ -2154,55 +2154,57 @@
 ues.
-height%7D%0A                  displayName=%22Height%22%0A
+orientation === %22portrait%22%7D%0A                /%3E%0A  
     
@@ -2205,37 +2205,41 @@
                 
-  /%3E%0A
+%3Cinput%0A  
                 
@@ -2234,34 +2234,42 @@
             
-%3CFormInput
+name=%22orientation%22
 %0A           
@@ -2279,19 +2279,19 @@
     
-name=%22width
+type=%22radio
 %22%0A  
@@ -2310,21 +2310,24 @@
     
-label=%22inches
+value=%22landscape
 %22%0A  
@@ -2376,37 +2376,39 @@
                 
-value
+checked
 =%7Bvalues.width%7D%0A
@@ -2404,52 +2404,36 @@
 ues.
-width%7D%0A                  displayName=%22Width%22
+orientation === %22landscape%22%7D
 %0A   

Change metrics on new doc to radio buttons