// ** React Imports
import { useState } from 'react';

// ** MUI Imports
import Box from '@mui/material/Box';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
import TabContext from '@mui/lab/TabContext';
import { styled } from '@mui/material/styles';
import MuiTab from '@mui/material/Tab';

// ** Icons Imports
import LockOutline from 'mdi-material-ui/LockOutline';
import BellOutline from 'mdi-material-ui/BellOutline';
import LinkVariant from 'mdi-material-ui/LinkVariant';
import AccountOutline from 'mdi-material-ui/AccountOutline';
import BookmarkOutline from 'mdi-material-ui/BookmarkOutline';

// ** Demo Components Imports
import UserViewBilling from 'src/views/apps/user/view/UserViewBilling';
import UserViewOverview from 'src/views/apps/user/view/UserViewOverview';
import UserViewSecurity from 'src/views/apps/user/view/UserViewSecurity';
import UserViewConnection from 'src/views/apps/user/view/UserViewConnection';
import UserViewNotification from 'src/views/apps/user/view/UserViewNotification';
import { Security } from 'mdi-material-ui';
import { useEffect } from 'react';
import Translations from 'src/layouts/components/Translations';
import { Translation } from 'react-i18next';

// ** Styled Tab component

const Tab = styled(MuiTab)(({ theme }) => ({
  minHeight: 48,
  flexDirection: 'row',
  '& svg': {
    marginBottom: '0 !important',
    marginRight: theme.spacing(3),
  },
}));

const UserViewRight = ({ invoiceData, id, userView }) => {
  const [idCurrentUser, setIdCurrentUser] = useState();

  const getCurrentUser = async () => {
    let idUser = JSON.parse(localStorage.getItem('userData'));
    idUser = idUser.id;
    setIdCurrentUser(idUser);

    return await idUser;
  };

  useEffect(() => {
    getCurrentUser();
  }, []);

  // ** State
  const [value, setValue] = useState('overview');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <TabContext value={value}>
      <TabList
        variant='scrollable'
        scrollButtons='auto'
        onChange={handleChange}
        aria-label='forced scroll tabs example'
        sx={{ borderBottom: theme => `1px solid ${theme.palette.divider}` }}
      >
        <Tab 
          value='overview' 
          label={<Translations text={'general.overview'} />}
          icon={<AccountOutline />} />
        {/*         <Tab 
          id='security' 
          value='security' 
          label={<Translations text={'general.security'} />}
          icon={<LockOutline />} 
          disabled={id == idCurrentUser ? false : true}
        />  */}
      </TabList>
      <Box sx={{ marginTop: 6 }}>
        <TabPanel sx={{ p: 0 }} value='overview'>
          {userView}
          {/* <UserViewOverview invoiceData={invoiceData} /> */}
        </TabPanel>
        <TabPanel sx={{ p: 0 }} value='security'>
          <UserViewSecurity id={id} />
        </TabPanel>

      </Box>
    </TabContext>
  );
};

export default UserViewRight;