import {
    Box, Tab, Tabs,
    Chip,
    Divider,
    Grid,
    Link,
    List,
    ListItem,
    ListItemIcon,
    ListItemSecondaryAction,
    Stack,
    Typography,
    useMediaQuery,
    Avatar,

} from '@mui/material';
import { enqueueSnackbar } from 'notistack';
import LinearWithLabel from 'components/@extended/progress/LinearWithLabel';
// import { PatternFormat } from 'react-number-format';
import axios from 'axios';
// project import
import MainCard from 'components/MainCard';
import { AimOutlined, EnvironmentOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { useEffect ,useState} from 'react';
import Loader from 'components/Loader';

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 />

    }
     <Grid container rowSpacing={4.5} columnSpacing={2.75}>
        <Grid item xs={12} sx={{ mb: -2.25 }}>
          <Stack direction={{ xs: 'column', md: 'row' }} justifyContent='space-between' alignItems='center' spacing={2}>
            <Stack direction='column' alignItems='flex-start' spacing={1}>
              <Typography variant="h3">Account Settings</Typography>
              </Stack>
              </Stack>
              </Grid>
              <Grid item xs={12}>
        <MainCard border={false} boxShadow  sx={{height:'100%'}}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%',height:'100%' }}>
                <Tabs value={0}
                    // onChange={handleChange}
                    variant="scrollable" scrollButtons="auto" aria-label="account profile tab">
                    <Tab label="Account"
                    //   component={Link} to="/apps/profiles/account/basic" icon={<UserOutlined />} iconPosition="start"
                    />
                </Tabs>




                <Grid container spacing={3}
                    sx={{ mt: 1,height:'100%'}}
                >
                    {/* <Grid item xs={12} sm={5} md={4} xl={3}>
                        <Grid container spacing={3} sx={{height:'100%'}}>
                            <Grid item xs={12} sx={{height:'100%'}}>
                                <MainCard sx={{height:'100%'}}>
                                    <Grid container spacing={3}  sx={{height:'100%'}}>
                                        <Grid item xs={12}  sx={{height:'100%'}}>
                                            <Stack direction="row" justifyContent="flex-end">
                                            </Stack>
                                            <Stack spacing={2.5} alignItems="center">
                                                <Avatar alt="Avatar 1" 
                                                sx={{width:80,height:80}}
                                                />
                                                <Stack spacing={0.5} alignItems="center">
                                                    <Typography variant="h5">{info.companyname || ''}</Typography>
                                                    <Typography color="secondary">{info.registrationno || ''}</Typography>
                                                </Stack>
                                            </Stack>
                                        </Grid>
                                      
                                        <Grid item xs={12}>
                                            <Divider />
                                        </Grid> 
                                        <Grid item xs={12}  sx={{height:'100%'}}>
                                            <List component="nav" aria-label="main mailbox folders" sx={{ py: 0, '& .MuiListItem-root': { p: 0, py: 1 } }}>
                                                <ListItem>
                                                    <ListItemIcon>
                                                        <MailOutlined />
                                                    </ListItemIcon>
                                                    <ListItemSecondaryAction>
                                                        <Typography align="right">{info.primaryemail || ''}</Typography>
                                                    </ListItemSecondaryAction>
                                                </ListItem>
                                                <ListItem>
                                                    <ListItemIcon>
                                                        <PhoneOutlined />
                                                    </ListItemIcon>
                                                    <ListItemSecondaryAction>
                                                        <Typography align="right">
                                                            {info.primarycontact || ''}
                                                            </Typography>
                                                    </ListItemSecondaryAction>
                                                </ListItem>
                                                <ListItem>
                                                    <ListItemIcon>
                                                        <AimOutlined />
                                                    </ListItemIcon>
                                                    <ListItemSecondaryAction>
                                                        <Typography align="right">
                                                            {info.city}
                                                            </Typography>
                                                    </ListItemSecondaryAction>
                                                </ListItem>
                                                <ListItem>
                                                    <ListItemIcon>
                                                        <EnvironmentOutlined />
                                                    </ListItemIcon>
                                                    <ListItemSecondaryAction>
                                                     
                                                        {info.state}
                                                    </ListItemSecondaryAction>
                                                </ListItem>
                                            </List>
                                        </Grid>
                                    </Grid>
                                </MainCard>
                            </Grid>
                          
                        </Grid>
                    </Grid> */}
                    <Grid item 
                    // xs={12} sm={7} md={8} xl={9}
                    xs={12} 
                    // sm={7} md={8} xl={9}
                    
                    >
                        <Grid container spacing={3} >
                          
                            <Grid item xs={12} >
                                <MainCard 
                            //     title={ <Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
                            //     <Avatar
                            //       alt=""
                            //       size="sm"
                            //       sx={{
                            //         width: '25px',
                            //         height: '25px'
                            //       }}
                            //     >
        
                            //     </Avatar>
                            //     <Stack direction="column">
                            //       <Typography variant="caption">{info.companyname}</Typography>
                            //     </Stack>
                            //   </Stack>}
                                 >
                                    <List sx={{ py: 0 }}>
                                        <ListItem divider={!matchDownMD}>
                                            <Grid container spacing={3}>
                                                <Grid item xs={12} md={6}>
                                                    <Stack spacing={0.5}>
                                                        <Typography color="secondary">Name</Typography>
                                                        <Typography>{info.tenantname || ''}</Typography>
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={12} md={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} md={6}>
                                                <Stack spacing={0.5}>
                                                        <Typography color="secondary">Registration No</Typography>
                                                        <Typography>{info.registrationno || ''}</Typography>
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={12} md={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} md={6}>
                                                    <Stack spacing={0.5}>
                                                        <Typography color="secondary">Phone</Typography>
                                                        <Typography>
                                                            {info.primarycontact || ''}
                                                        </Typography>
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={12} md={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} md={6}>
                                                    <Stack spacing={0.5}>
                                                        <Typography color="secondary">Email</Typography>
                                                        <Typography>{info.primaryemail || ''}</Typography>
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={12} md={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} md={6}>
                                                    <Stack spacing={0.5}>
                                                        <Typography color="secondary">Suburb</Typography>
                                                        <Typography>{info.suburb || ''}</Typography>
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={12} md={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 item xs={12}>
                                <MainCard title="Info">
                                    <Typography color="secondary">
                                      {info.info || ''}
                                    </Typography>
                                </MainCard>
                            </Grid> */}
                            
                        </Grid>
                    </Grid>
                </Grid>
            </Box>
        </MainCard>
        </Grid>
        </Grid>
    </>
}

export default Accountsettings;