import {
  Box,
  Button,
  Card,
  Collapse,
  IconButton,
  InputLabel,
  MenuItem,
  OutlinedInput,
  Paper,
  Select,
  SelectChangeEvent,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
  Badge,
  Tab,
  Tabs,
  CardHeader,
  Stack,
  Menu,
  ButtonGroup,
  Pagination,
  Grid,
  Chip,
  styled,
  DialogTitle,
  Dialog,
  DialogContent,
  DialogContentText,
  DialogActions,
  Switch,
  Avatar,
  MenuItemClasses,
} from '@mui/material';
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';

import {
  Link,
  NavLink as RouterLink,
  useSearchParams,
  useNavigate,
  useParams,
} from 'react-router-dom';
// hooks
import React, { ChangeEvent, Component, useEffect, useMemo, useRef, useState } from 'react';
import useSettings from '../../hooks/useSettings';
// components
import axios from '../../utils/axios';
import { LaravelPaginatedData } from '../../@types/paginated-data';
import { Icd } from '../../@types/diagnosis';
import BasePagination from '../../components/BasePagination';
import { Users } from '../../@types/user';
import CreateIcon from '@mui/icons-material/Create';
import { Props } from '../../components/editor/index';
import { red } from '@mui/material/colors';
import { borderRadius, margin, padding } from '@mui/system';

import FormPassword from './FormPassword';
import OrganizationsForm from './FormPassword';
import DialogTopUpLimit from './DialogTopUpLimit';
import { number } from 'yup/lib/locale';
import AccountBoxIcon from '@mui/icons-material/AccountBox';
import PersonIcon from '@mui/icons-material/Person';
import BadgeIcon from '@mui/icons-material/Badge';
import CallIcon from '@mui/icons-material/Call';
import MailIcon from '@mui/icons-material/Mail';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import LockIcon from '@mui/icons-material/Lock';
import KeyIcon from '@mui/icons-material/Key';
import useAuth from '../../hooks/useAuth';
import LogoutTwoToneIcon from '@mui/icons-material/LogoutTwoTone';

export default function List() {
  // Generate the every row of the table
  const HeaderStyle = styled('header')(({ theme }) => ({
    padding: theme.spacing(5),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  }));

  const Name = styled(Typography)(({ theme }) => ({
    ...theme.typography.h3,
    marginBottom: theme.spacing(1),
    marginTop: theme.spacing(2),
    color: '#005B7F',
  }));

  const LabelStyle = styled(Typography)(({ theme }) => ({
    ...theme.typography.h6,
    marginBottom: theme.spacing(2),
    marginTop: theme.spacing(2),
    color: '#005B7F',
  }));

  const navigate = useNavigate();
  const { organization_id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const [importResult, setImportResult] = useState(null);

  const { id } = useParams();
  const isEdit = id ? true : false;

  const Item = styled(Paper)(({ theme }) => ({
    textAlign: 'left',
  }));

  const ButtonStyle = {
    color: '#005B7F',
    backgroundColor: '#FFFFFF',
    boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
    borderRadius: '8px',
    flex: 1,
    marginRight: 3,
    padding: '13px',
    border: '2px solid #005B7F',
    fontSize: '15px',
    lineHeight: '16px',
    textTransform: 'none',
    '&:hover': {
      backgroundColor: '#005B7F',
      color: '#FFFFFF',
    },
  };

  const ButtonStyle2 = {
    color: '#CB3A31',
    flex: 1,
    marginRight: 3,
    padding: '13px',
    fontSize: '15px',
    lineHeight: '16px',
    textTransform: 'none',
    '&:hover': {
      backgroundColor: '#DFE2E1',
    },
  };

  function createData(Users: Users): Users {
    return {
      ...Users,
    };
  }

  const headStyle = {
    fontWeight: 'bold',
  };

  function DataUsers() {
    const [user, setUser] = useState([]);
    useEffect(() => {
      axios.get('/user').then((response) => {
        setUser(response.data);
      });
    }, []);

    const defaultValues = useMemo(
      () => ({
        id: user?.id,
        email: user?.email,
      }),
      [user]
    );

    console.log('user', user);
    return (
      <div>
        <Typography variant="h3" sx={{ mb: 5 }}>
          Profile
        </Typography>
        <Box position="relative" mb={5}>
          <Box
            display="flex"
            alignItems="center"
            position="relative"
            minHeight="18.75rem"
            borderRadius="xl"
            sx={{
              borderRadius: '20px',
            }}
          >
            <img
              src="/image/overlay.png"
              alt="overlay"
              width="100%"
              height="100%"
              style={{ borderTopLeftRadius: '20px', borderTopRightRadius: '20px' }}
            />
          </Box>
          <Card
            sx={{
              position: 'relative',
              mt: -8,
              mx: 3,
              py: 2,
              px: 2,
            }}
          >
            <Grid container spacing={3} alignItems="center" sx={{ p: 3 }}>
              <Grid item>
                <Avatar
                  src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
                  alt="Rayan Moran"
                  sx={{ width: 100, height: 100, ml: '4%' }}
                />
              </Grid>
              <Grid item>
                <Box height="100%" mt={0.5} lineHeight={1} sx={{ ml: 5 }}>
                  <Typography variant="h4" fontWeight="700">
                    Rayan Moran
                  </Typography>
                  <Typography variant="subtitle1" color="text.secondary">
                    Super Admin
                  </Typography>
                </Box>
              </Grid>
              <Grid item xs={12} md={6} lg={4} sx={{ ml: 'auto' }}></Grid>
            </Grid>
          </Card>
        </Box>
        <Stack spacing={3}>
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <Box sx={{ p: 3 }}>
                <Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
                  <Box
                    sx={{
                      display: 'flex',
                      pb: 2,
                      borderBottom: '5px solid',
                    }}
                  >
                    <Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
                      <AccountBoxIcon />
                      <Typography variant="h4" sx={{ ml: 1 }}>
                        Profil
                      </Typography>
                    </Stack>
                  </Box>
                </Grid>
                <Box sx={{ p: 5 }}>
                  <Grid container spacing={3}>
                    <Grid item xs={12} md={6}>
                      <Grid item xs={12} md={12}>
                        <LabelStyle>
                          <PersonIcon /> ID
                        </LabelStyle>
                        <Title>{user?.id ? user?.id : '-'}</Title>
                      </Grid>
                      <Grid item xs={12} md={12}>
                        <LabelStyle>
                          <BadgeIcon /> Nama
                        </LabelStyle>
                        <Title>Perdi</Title>
                      </Grid>
                    </Grid>
                    <Grid item xs={12} md={6}>
                      <Grid item xs={12} md={12}>
                        <LabelStyle>
                          <CallIcon /> Telepon
                        </LabelStyle>
                        <Title>2131231231</Title>
                      </Grid>
                      <Grid item xs={12} md={12}>
                        <LabelStyle>
                          <MailIcon /> Email
                        </LabelStyle>
                        <Title>{user?.email ? user?.email : '-'}</Title>
                      </Grid>
                    </Grid>
                  </Grid>
                </Box>
              </Box>
            </Grid>
            <Grid item xs={12} md={6}>
              <Box sx={{ p: 3 }}>
                <Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
                  <Box
                    sx={{
                      display: 'flex',
                      pb: 2,
                      borderBottom: '5px solid',
                    }}
                  >
                    <Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
                      <LockIcon />
                      <Typography variant="h4" sx={{ ml: 1 }}>
                        Keamanan
                      </Typography>
                    </Stack>
                  </Box>
                </Grid>
                <Box sx={{ p: 5 }}>
                  <Grid item xs={12} md={12}>
                    <div style={{ display: 'flex', justifyContent: 'Center' }}>
                      <Button
                        variant="contained"
                        sx={ButtonStyle}
                        startIcon={<KeyIcon />}
                        onClick={() => {
                          clickHandler('edit');
                          setEdit(user.id);
                        }}
                      >
                        Ubah Kata Sandi
                      </Button>
                    </div>
                  </Grid>
                </Box>
              </Box>
              <Box sx={{ p: 3 }} style={{ display: 'flex', justifyContent: 'center' }}>
                <Button onClick={handleLogout} variant="outlined" color="error">
                  <LogoutTwoToneIcon /> Logout
                </Button>
              </Box>
            </Grid>
          </Grid>
          {/* </Box>
            </React.Fragment> */}
        </Stack>
      </div>
    );
  }

  const Title = styled(Typography)(({ theme }) => ({
    boxShadow: 'none',
    // paddingBottom: theme.spacing(3),
    fontWeight: 700,
    color: '#000000',
  }));

  const TitleRole = styled(Typography)(({ theme }) => ({
    ...theme.typography.h5,
    boxShadow: 'none',
    fontWeight: 500,
    color: '#000000',
  }));

  const [openDialog, setOpenDialog] = useState(false);
  const [dialogTitle, setDialogTitle] = useState('');
  const [isDialog, setIsDialog] = useState('');
  const [edit, setEdit] = useState(number);
  const clickHandler = (isDialog: string) => {
    switch (isDialog) {
      case 'edit':
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;
      default:
        break;
    }
  };

  const { logout } = useAuth();

  const handleLogout = () => {
    logout();
    navigate('/auth/login');
  };

  return (
    <Stack>
      <Card sx={{ marginTop: '30px', p: 5, boxShadow: 'none' }}>
        {/* <Row /> */}
        <DataUsers />
        {/* {dataTableData.map((row) => (
            <Row key={row.id} row={row} />
          ))} */}
      </Card>

      {isDialog === 'edit' && (
        <FormPassword
          data={edit}
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
        />
      )}
    </Stack>
  );
}