import React, { Component } from 'react'
import { Flex, Input } from '@hackclub/design-system'
import { Submit } from 'components/Forms'
import { withFormik } from 'formik'
import { isEmpty } from 'lodash'
import Composer, { LS_BODY_KEY } from './CommentComposer'
import yup from 'yup'
import api from 'api'

const Form = Flex.withComponent('form').extend`
  align-items: flex-end;

  > div:first-child {
    flex: 1 1 auto;
  }

  .DraftEditor-editorContainer > div {
    background-color: ${props => props.theme.colors.blue[0]};
    border-radius: ${props => props.theme.radii[2]};
    padding: ${props => props.theme.space[2]}px ${props =>
  props.theme.space[3]}px;
    min-height: 2rem;
  }

  .public-DraftEditorPlaceholder-inner {
    color: ${props => props.theme.colors.muted};
    font-size: ${props => props.theme.fontSizes[2]}px;
  }
`

const statusMessage = status =>
  status ? { success: 'Posted!', error: 'Error' }[status] : 'Post'
const statusColor = status =>
  status === 'success' || status === 'error' ? status.toString() : 'info'
const InnerForm = ({
  values,
  errors,
  touched,
  handleChange,
  handleBlur,
  handleSubmit,
  isSubmitting,
  setFieldValue,
  status,
  ...props
}) => (
  <Form w={1} mt={3} onSubmit={handleSubmit}>
    <Composer onChange={setFieldValue} onBlur={handleBlur} />
    <Submit
      onClick={handleSubmit}
      disabled={isSubmitting || isEmpty(props.email)}
      value={statusMessage(status)}
      bg={statusColor(status)}
      ml={3}
    />
  </Form>
)
const CommentForm = withFormik({
  validationSchema: yup.object().shape({
    body: yup.string()
  }),
  enableReinitialize: true,
  handleSubmit: (data, { props, setStatus, setSubmitting, resetForm }) => {
    const body = JSON.stringify({ body: data.body })
    console.log(body)
    api
      .post(`v1/posts/${props.id}/comments`, { method: 'POST', body })
      .then(res => {
        resetForm()
        if (localStorage) {
          localStorage.removeItem(LS_BODY_KEY)
        }
        setStatus('success')
      })
      .catch(e => {
        setSubmitting(false)
        setStatus('error')
      })
  },
  displayName: 'CommentForm'
})(InnerForm)
export default CommentForm

@@ -54,16 +54,28 @@
 x, Input
+, IconButton
  %7D from 
@@ -104,50 +104,8 @@
 em'%0A
-import %7B Submit %7D from 'components/Forms'%0A
 impo
@@ -340,19 +340,21 @@
 s: flex-
-end
+start
 ;%0A%0A  %3E d
@@ -443,24 +443,24 @@
    b
-ackground-color:
+order: 1px solid
  $%7Bp
@@ -490,15 +490,13 @@
 ors.
-blue%5B0%5D
+smoke
 %7D;%0A 
@@ -512,16 +512,35 @@
 -radius:
+ 16px;%0A    padding:
  $%7Bprops
@@ -559,31 +559,19 @@
 eme.
-radii%5B2%5D%7D;%0A    padding:
+space%5B2%5D%7Dpx
  $%7Bp
@@ -569,32 +569,34 @@
 2%5D%7Dpx $%7Bprops =%3E
+%0A 
  props.theme.spa
@@ -590,37 +590,53 @@
 ops.theme.space%5B
-2
+3
 %5D%7Dpx
+;%0A    font-size:
  $%7Bprops =%3E%0A  pr
@@ -622,34 +622,32 @@
 size: $%7Bprops =%3E
-%0A 
  props.theme.spa
@@ -647,28 +647,44 @@
 eme.
-space%5B3%5D%7Dpx
+fontSizes%5B2%5D%7Dpx !important
 ;%0A    
-m
+l
 in
+e
 -hei
@@ -692,12 +692,13 @@
 ht: 
-2rem
+1.375
 ;%0A  
@@ -864,23 +864,20 @@
 t status
-Message
+Icon
  = statu
@@ -908,15 +908,13 @@
 s: '
-Posted!
+check
 ', e
@@ -920,17 +920,17 @@
 error: '
-E
+e
 rror' %7D%5B
@@ -944,12 +944,12 @@
  : '
-Post
+send
 '%0Aco
@@ -1323,22 +1323,46 @@
 /%3E%0A    %3C
-S
+IconButton%0A      type=%22s
 ubmit
+%22
 %0A      o
@@ -1443,20 +1443,19 @@
 %7D%0A      
-valu
+nam
 e=%7Bstatu
@@ -1459,15 +1459,12 @@
 atus
-Message
+Icon
 (sta
@@ -1496,24 +1496,81 @@
 or(status)%7D%0A
+      color=%22white%22%0A      style=%7B%7B borderRadius: 9999 %7D%7D%0A
       ml=%7B3%7D

Use IconButton on NewComment