import { Grid, TextField, Typography, useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useQuery } from '@tanstack/react-query';
import CircularLoader from 'components/CircularLoader';
import Loader from 'components/Loader';
import MainCard from 'components/MainCard';
import { getusers } from 'pages/api/api';

const ViewProfile = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const {
    data: userData,
    isLoading
  } = useQuery({
    queryKey: ['getuser'],
    queryFn: getusers
  });
  return (
    <>
      {isLoading && (
        <>
          <Loader />
          <CircularLoader />
        </>
      )}

      <MainCard
        contentSX={{ p: isMobile ? 2 : 3 }}
        title={
          <Typography variant="h3" sx={{ m: { xs: 1.5, md: 3 } }}>
            User Profile
          </Typography>
        }
      >
        <Grid container spacing={{ xs: 2.5, md: 4 }}>
          {/* ==============================|| userid ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'User ID'}
              value={userData?.userid || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| Name ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'User Name'}
              value={userData?.fullname || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| Location ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'App Location '}
              value={userData?.applocation || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>

          {/* ==============================|| Authname ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'Auth Name'}
              value={userData?.authname || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>

          {/* ==============================|| contactno ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'Contact No'}
              value={userData?.contactno || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| email ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'E-Mail'}
              value={userData?.email || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| address ||==============================  */}
          <Grid item xs={12}>
            <TextField
              fullWidth
              label={'Address'}
              value={userData?.address || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| Location ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'Location'}
              value={userData?.suburb || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| city ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'City'}
              value={userData?.city || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| state ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'State'}
              value={userData?.state || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
          {/* ==============================|| Postcode ||==============================  */}
          <Grid item xs={12} sm={6} md={4}>
            <TextField
              fullWidth
              label={'Postcode'}
              value={userData?.postcode || ''}
              InputProps={{
                readOnly: true
              }}
              variant="standard"
            />
          </Grid>
        </Grid>
      </MainCard>
    </>
  );
};

export default ViewProfile;