import { Grid, List, ListItem, Stack, Typography, useMediaQuery } from '@mui/material';
import { enqueueSnackbar } from 'notistack';

import axios from 'axios';
// project import
import MainCard from 'components/MainCard';
import { useEffect, useState } from 'react';
import Loader from 'components/Loader';
import Footer from 'layout/MainLayout/Footer';
import TitleCard from './titleCard';

const Accountsettings = () => {
  const matchDownMD = useMediaQuery((theme) => theme.breakpoints.down('md'));
  const [info, setInfo] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (localStorage.getItem('tenantid')) {
      fetchaccount(localStorage.getItem('tenantid'));
    }
  }, []);

  const fetchaccount = async (tid) => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
      .then((res) => {
        console.log(res);
        if (res.data.status) {
          setInfo(res.data.details);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        enqueueSnackbar(err.message, {
          variant: 'error',
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          autoHideDuration: 2000
        });
        setLoading(false);
      });
  };

  return (
    <>
      {loading && <Loader />}
      <TitleCard title={'Profile'} />

      <Grid container spacing={3}>
        <Grid item xs={12}>
          <MainCard>
            <List sx={{ py: 0 }}>
              <ListItem divider={!matchDownMD}>
                <Grid container spacing={3}>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Name</Typography>
                      <Typography>{info.tenantname || ''}</Typography>
                    </Stack>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Company Name</Typography>
                      <Typography>{info.companyname || ''}</Typography>
                    </Stack>
                  </Grid>
                </Grid>
              </ListItem>
              <ListItem divider={!matchDownMD}>
                <Grid container spacing={3}>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Registration No</Typography>
                      <Typography>{info.registrationno || ''}</Typography>
                    </Stack>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Info</Typography>
                      <Typography>{info.info || ''}</Typography>
                    </Stack>
                  </Grid>
                </Grid>
              </ListItem>
              <ListItem divider={!matchDownMD}>
                <Grid container spacing={3}>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Phone</Typography>
                      <Typography>{info.primarycontact || ''}</Typography>
                    </Stack>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">State</Typography>
                      <Typography>{info.state || ''}</Typography>
                    </Stack>
                  </Grid>
                </Grid>
              </ListItem>

              <ListItem divider={!matchDownMD}>
                <Grid container spacing={3}>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Email</Typography>
                      <Typography>{info.primaryemail || ''}</Typography>
                    </Stack>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">City</Typography>
                      <Typography>{info.city || ''}</Typography>
                    </Stack>
                  </Grid>
                </Grid>
              </ListItem>
              <ListItem divider={!matchDownMD}>
                <Grid container spacing={3}>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Suburb</Typography>
                      <Typography>{info.suburb || ''}</Typography>
                    </Stack>
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Stack spacing={0.5}>
                      <Typography color="secondary">Zip Code</Typography>
                      <Typography>{info.postcode || ''}</Typography>
                    </Stack>
                  </Grid>
                </Grid>
              </ListItem>
              <ListItem>
                <Stack spacing={0.5}>
                  <Typography color="secondary">Address</Typography>
                  <Typography>{info.address || ''}</Typography>
                </Stack>
              </ListItem>
            </List>
          </MainCard>
        </Grid>
      </Grid>

      <Footer />
    </>
  );
};

export default Accountsettings;