LegalEntityPage

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  Autocomplete,
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  Collapse,
  IconButton,
  Tab,
  Tabs,
  TextField,
  Typography,
} from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { useState } from 'react';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ContactDetails from './contactDetails';
import Content from '../common/components/content';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Layout from '../common/components/layout';
import Parties from './relatedParties';
import Valuation from './valuation';

const LegalEntityPage = () => {
  const breadcrumbs = [
    { label: 'System', href: '/' },
    { label: 'Dashboard', href: '/' },
    { label: 'Your Clients', href: '/clients' },
    { label: 'Add New Legal Entity', href: '/newLegalEntity' },
  ];
  const [expanded, setExpanded] = useState(false);
  const handleExpandClick = () => {
    setExpanded(!expanded);
  };
  const [tab, setTab] = useState(0);
  const {
    handleSubmit,
    control,
    formState: { errors },
    getValues,
  } = useForm({
    mode: 'onChange',
  });
  const values = getValues();
  console.warn(values, 88);
  const onSubmit = (data: any) => {
    if (tab === 0) {
      setTab(1);
    }
    if (tab === 1) {
      setTab(2);
    }
    if (tab === 2) {
      setTab(3);
    }
    if (tab === 3) {
      setTab(4);
    }
  };
  const handleBack = () => {
    if (tab === 1) {
      setTab(0);
    }
    if (tab === 2) {
      setTab(1);
    }
    if (tab === 3) {
      setTab(2);
    }
    if (tab === 4) {
      setTab(3);
    }
  };

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setTab(newValue);
  };
  return (
    <Layout breadcrumbs={breadcrumbs}>
      <Content sx={{ mt: 4 }}>
        <Box display="flex" pb={4} alignItems="center">
          <Button sx={{ minWidth: 0, p: 0 }} component="a" href="/clients">
            <ArrowBackIcon color="disabled" />
          </Button>
          <Typography ml={1} variant="h2">
            Legal entity
          </Typography>
        </Box>
        <Box p={3} sx={{ background: 'white' }}>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Box sx={{ width: '100%' }}>
              <Box
                sx={{
                  borderBottom: 1,
                  borderColor: 'divider',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <Tabs value={tab} onChange={handleChange}>
                  <Tab label="1. Basic Information" />
                  <Tab label="2. Contact and address details" />
                  <Tab label="3. Valuation" />
                  <Tab label="4. Related Parties" />
                </Tabs>
                <Typography color="text.secondary" mr={2}>
                  Status: Unfilled
                </Typography>
              </Box>
            </Box>
            {tab === 0 && (
              <>
                <Typography p={3} width="50%" color="text.secondary">
                  Instructional text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </Typography>
                <Box display="flex">
                  <Controller
                    name="name"
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <TextField
                        onChange={({ target: { value } }) => {
                          onChange(value);
                        }}
                        value={value}
                        sx={{ p: 0, width: '270px' }}
                        label="Legal entity name *"
                        placeholder="e.g. ABC Holdings"
                        error={!!error}
                        helperText={error?.message}
                      />
                    )}
                  />
                  <Controller
                    name="registrationNumber"
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <TextField
                        onChange={({ target: { value } }) => {
                          onChange(value);
                        }}
                        value={value}
                        sx={{ p: 0, width: '270px', ml: 7 }}
                        label="Registration number *"
                        placeholder="e.g. 123456789"
                        error={!!error}
                        helperText={error?.message}
                      />
                    )}
                  />
                </Box>
                <Box display="flex" mt={3}>
                  <Controller
                    name="date"
                    defaultValue=""
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onBlur, onChange, value, name }, fieldState }) => (
                      <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <DatePicker
                          value={value}
                          renderInput={(inputProps) => (
                            <TextField
                              {...inputProps}
                              onBlur={onBlur}
                              label="Date established *"
                              name={name}
                              error={!!fieldState.error}
                              helperText={fieldState.error?.message}
                            />
                          )}
                          onChange={onChange}
                        />
                      </LocalizationProvider>
                    )}
                  />
                </Box>
                <Card>
                  <CardActions
                    sx={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      border: 2,
                      borderColor: 'divider',
                      mt: 7,
                    }}
                  >
                    <Typography title="Additional Info">Additional Info</Typography>
                    <IconButton
                      disableRipple
                      onClick={handleExpandClick}
                      aria-expanded={expanded}
                      aria-label="Show more"
                    >
                      <ExpandMoreIcon />
                    </IconButton>
                  </CardActions>
                  <Collapse
                    sx={{
                      border: 2,
                      borderColor: 'divider',
                    }}
                    in={expanded}
                    timeout="auto"
                    unmountOnExit
                  >
                    <CardContent>
                      <Box display="flex" justifyContent="space-between">
                        <Controller
                          name="vatNumber"
                          control={control}
                          render={({ field: { onChange, value } }) => (
                            <TextField
                              value={value}
                              sx={{ p: 0, width: '289px' }}
                              label="VAT number"
                              placeholder="e.g. 24500"
                              onChange={({ target: { value } }) => {
                                onChange(value);
                              }}
                            />
                          )}
                        />
                        <Controller
                          name="taxNumber"
                          control={control}
                          render={({ field: { onChange, value } }) => (
                            <TextField
                              value={value}
                              sx={{ p: 0, width: '289px' }}
                              label="TAX number"
                              placeholder="e.g. 24500"
                              onChange={({ target: { value } }) => {
                                onChange(value);
                              }}
                            />
                          )}
                        />
                      </Box>
                      <Controller
                        control={control}
                        name="membership"
                        render={({ field: { onChange, value } }) => (
                          <Autocomplete
                            onChange={(event, item) => {
                              onChange(item?.label);
                            }}
                            value={value}
                            options={[
                              { label: 'English' },
                              { label: 'German' },
                              { label: 'Ukrainian' },
                            ]}
                            sx={{ width: '290px', mt: 2 }}
                            getOptionLabel={(option) => {
                              return option.label ?? option;
                            }}
                            isOptionEqualToValue={(
                              option: { label: string },
                              value: { label: string },
                            ) => value.label === undefined || option.label === value.label}
                            renderInput={(parameters) => (
                              <TextField
                                {...parameters}
                                variant="outlined"
                                label="Language"
                                placeholder="Please choose ..."
                                size="small"
                              />
                            )}
                          />
                        )}
                      />
                    </CardContent>
                  </Collapse>
                </Card>
              </>
            )}
            {tab === 1 && <ContactDetails control={control} />}
            {tab === 2 && <Valuation control={control} />}
            {tab === 3 && <Parties />}

            <Box display="flex" mt={5} justifyContent="space-between">
              {tab !== 0 ? (
                <Button onClick={handleBack} variant="outlined" color="primary">
                  Back
                </Button>
              ) : (
                <Box />
              )}
              {tab === 4 ? (
                <Button href="/clients" type="submit" variant="outlined" color="primary">
                  Save and close
                </Button>
              ) : (
                <Button type="submit" variant="outlined" color="primary">
                  Next
                </Button>
              )}
            </Box>
          </form>
        </Box>
      </Content>
    </Layout>
  );
};
export default LegalEntityPage;