import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { Field } from 'formik'
import { TextField } from 'formik-material-ui'
import React from 'react'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {},
    row: {
      margin: theme.spacing(3, 0),
      display: 'flex',
      alignItems: 'center',
      '&:first-of-type': {
        marginTop: 0,
      },
    },
  }),
)

const TagFormFields = (): JSX.Element => {
  const classes = useStyles()

  return (
    <>
      <div className={classes.row}>
        <Field
          component={TextField}
          name='tag.namespace'
          id='tag.namespace'
          label='Tag namespace'
          placeholder='tag_namespace'
          helperText='Use snake_case.'
          variant='outlined'
          fullWidth
          required
          InputLabelProps={{
            shrink: true,
          }}
        />
      </div>
      <div className={classes.row}>
        <Field
          component={TextField}
          name='tag.name'
          id='tag.name'
          label='Tag name'
          placeholder='tag_name'
          helperText='Use snake_case.'
          variant='outlined'
          fullWidth
          required
          InputLabelProps={{
            shrink: true,
          }}
        />
      </div>
      <div className={classes.row}>
        <Field
          component={TextField}
          name='tag.description'
          id='tag.description'
          label='Tag description'
          placeholder='Put your Tag description here!'
          variant='outlined'
          fullWidth
          required
          multiline
          rows={4}
          InputLabelProps={{
            shrink: true,
          }}
        />
      </div>
    </>
  )
}

export default TagFormFields