import React, { useState, useEffect } from 'react';
import { Grid } from '@material-ui/core';
import { ContentWrapper } from 'components/content-wrapper/content-wrapper';
import { UserAdministrationForm } from './user-formular';
import { Typography } from '@material-ui/core';
import { UserAdministrationBasic } from './user-administration-basic';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

const createInitialValues = {
  login: undefined,
  firstName: undefined,
  surName: undefined,
  password: undefined,
  role: undefined,
};

export const UserAdministration: React.FC = () => {
  const [createForm, setCreateForm] = useState<boolean>(true);

  const initialValues = createForm ? createInitialValues : createInitialValues;

  useEffect(() => {
    if (createForm) {
    }
  }, [createForm]);

  return (
    <ContentWrapper>
      <>
        <Grid item style={{ marginLeft: 50, width: 575 }} xs={6}>
          <Typography component="h1" variant="h3" style={{ marginBottom: 50 }}>
            {`${createForm ? 'Vytvoření nového' : 'Úprava'} uživatele`}
          </Typography>
          <UserAdministrationForm initialValues={initialValues}>
            <UserAdministrationBasic createFormular={createForm} />
          </UserAdministrationForm>
        </Grid>
        <Grid item style={{ marginLeft: 50 }} xs={2}>
          <FormControlLabel
            label="Přepnout formulář"
            control={
              <Switch
                checked={createForm}
                onChange={() => setCreateForm(!createForm)}
                color="primary"
              />
            }
          />
        </Grid>
      </>
    </ContentWrapper>
  );
};
