import React from 'react'
import { RectanglePlaceholder, TextPlaceholder } from 'atoms/Placeholder'
import {
  FormWrapper,
  Row,
  ButtonWrapper,
  Wrapper,
} from './styled'

function renderForm() {
  return (
    <React.Fragment>
      <FormWrapper>
        <Row>
          <TextPlaceholder width={'60'} height={'12'} />
          <RectanglePlaceholder height={'42'} />

          <TextPlaceholder width={'60'} height={'12'} />
          <RectanglePlaceholder height={'42'} />
        </Row>
        <Row>
          <TextPlaceholder width={'60'} height={'12'} />
          <RectanglePlaceholder height={'42'} />

          <TextPlaceholder width={'60'} height={'12'} />
          <RectanglePlaceholder height={'42'} />
        </Row>
        <Row>
          <TextPlaceholder width={'60'} height={'12'} />
          <RectanglePlaceholder height={'42'} />

          <TextPlaceholder width={'60'} height={'12'} />
          <RectanglePlaceholder height={'42'} />
        </Row>
      </FormWrapper>
      <ButtonWrapper>
        <RectanglePlaceholder height={'44'} />
        <RectanglePlaceholder height={'44'} />
      </ButtonWrapper>
    </React.Fragment >
  )
}

class EditUser extends React.PureComponent {
  render() {
    const children = renderForm()
    return (
      <Wrapper>
        {children}
      </Wrapper>
    )
  }
}

export { EditUser }
export default EditUser