import React, { Fragment } from 'react'
import styled from 'styled-components'
import { ValidatedField, TextField, Menu, Checkbox, th } from '@pubsweet/ui'

import { required } from 'xpub-validators'

const EditUserForm = ({
  roles = false,
  journal,
  user,
  error,
  title = 'Edit user',
  subtitle = null,
}) => (
  <Fragment>
    <Title>{title}</Title>
    {subtitle && <Subtitle>{subtitle}</Subtitle>}
    <Row>
      <RowItem>
        <Label> First name* </Label>
        <ValidatedField
          component={TextField}
          name="firstName"
          validate={[required]}
        />
      </RowItem>
      <RowItem>
        <Label> Last name* </Label>
        <ValidatedField
          component={TextField}
          name="lastName"
          validate={[required]}
        />
      </RowItem>
    </Row>
    <Row>
      <RowItem>
        <Label> Affiliation* </Label>
        <ValidatedField
          component={TextField}
          name="affiliation"
          validate={[required]}
        />
      </RowItem>
      <RowItem>
        <Label> Title* </Label>
        <ValidatedField
          component={input => <Menu {...input} options={journal.title} />}
          name="title"
        />
      </RowItem>
    </Row>
    {roles && (
      <Row>
        <RowItem>
          <Label> Roles*</Label>
          <ValidatedField
            component={input => (
              <Checkbox
                checked
                readonly
                type="checkbox"
                {...input}
                label="Author"
              />
            )}
            name="author"
          />
          <ValidatedField
            component={input => (
              <Checkbox
                checked={input.value}
                label="Editor in Chief"
                type="checkbox"
                {...input}
              />
            )}
            name="editorInChief"
          />
          <ValidatedField
            component={input => (
              <Checkbox
                checked={input.value}
                label="Handling Editor"
                type="checkbox"
                {...input}
              />
            )}
            name="handlingEditor"
          />
          <ValidatedField
            component={input => (
              <Checkbox
                checked={input.value}
                label="Admin"
                type="checkbox"
                {...input}
              />
            )}
            name="admin"
          />
        </RowItem>
      </Row>
    )}
    <Row>
      <RowItem>{error && <ErrorMessage>{error}</ErrorMessage>}</RowItem>
    </Row>
  </Fragment>
)

export default EditUserForm

// #region styles

const Row = styled.div`
  background-color: ${th('backgroundColorReverse')};
  display: flex;
  flex-direction: row;
  margin: calc(${th('subGridUnit')}*3) 0;
  div[role='alert'] {
    margin-top: 0;
  }
`

const RowItem = styled.div`
  flex: 1;
  margin-right: calc(${th('subGridUnit')}*3);
  label + div[role='alert'] {
    margin-top: 0;
  }
`

const Title = styled.h4`
  color: ${th('colorPrimary')};
  font-size: ${th('fontSizeHeading4')};
  margin: calc(${th('subGridUnit')}*2) 0;
`

const Subtitle = styled.div`
  color: ${th('colorPrimary')};
  font-size: ${th('fontSizeBase')};
  margin: 0;
`

const Label = styled.div`
  font-size: ${th('fontSizeBase')};
  text-transform: uppercase;
`
const ErrorMessage = styled.div`
  color: ${th('colorError')};
`

// #endregion