import { Box, Chip, Container, Typography } from '@mui/material'
import { useQuery } from 'react-query'
import axios from '../../config/axios'
import { InstitutionsStore } from '../../shared-state/InstitutionsStore'
import PageHeader from '../PageHeader'
import Spinner from '../Spinner'
import Education from './Education/Education'
import Experience from './Experience/Experience'
import PaperPublications from './PaperPublication/PaperPublications'
import ResearchProjects from './ResearchProjects/ResearchProjects'
import StyledTabsContainer from './StyledTabsContainer'
import {
  StyledArrowIcon,
  StyledAvatar,
  StyledBox,
  StyledBoxHeader,
  StyledMainContainer,
} from './Styles'
import Workshop from './Workshop/Workshop'

const MyProfile = ({ close }) => {
  const { institutions, current } = InstitutionsStore.useState((s) => s)

  const { data, isLoading } = useQuery('dashboard', () =>
    axios.get('/square/users/dashboard').then((res) => res?.data),
  )
  const { data: userProfile } = useQuery('user-profile', () =>
    axios.get('/square/users/profile').then((res) => res?.data),
  )
  const { data: classroomSubjects } = useQuery('classroom-subjects', () =>
    axios.get('/square/subjects/faculty').then((res) => res?.data),
  )
  const { data: researchProject } = useQuery('research-projects', () =>
    axios.get('/square/research-projects').then((res) => res?.data),
  )

  const handleHomeClick = () => {
    close()
  }

  if (isLoading) {
    return <Spinner />
  }
  const tabs = [
    {
      key: 'Experience',
      label: 'Experience',
      component: <Experience experiences={data?.experiences} />,
    },
    {
      key: 'Paper Publications',
      label: 'Paper Publications',
      component: (
        <PaperPublications
          paperPublications={data?.papers}
          userProfile={userProfile}
        />
      ),
    },
    {
      key: 'Workshop',
      label: 'Workshop',
      component: <Workshop workshops={data?.workshops} />,
    },
    {
      key: 'education',
      label: 'Education',
      component: <Education educations={data?.educations} />,
    },
    {
      key: 'research projects',
      label: 'Research Projects',
      component: <ResearchProjects researchProject={researchProject} />,
    },
  ]
  function Years(num) {
    switch (num) {
      case 1:
        return '1st'
      case 2:
        return '2nd'
      case 3:
        return '3rd'
      case 4:
        return '4th'
      default:
        ''
    }
  }

  return (
    <>
      <StyledBox />
      <PageHeader
        title={
          <>
            <StyledArrowIcon
              onClick={handleHomeClick}
              sx={{ color: 'white', zIndex: 1 }}
            />
            <Typography variant="h1" sx={{ color: 'white', zIndex: 1 }}>
              My Profile
            </Typography>
          </>
        }
      />
      <Container maxWidth="lg">
        <Box>
          <StyledBoxHeader>
            <Box sx={{ flex: 1 }}>
              <Box
                sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
              >
                <StyledAvatar src={userProfile?.picture?.url}>
                  <Typography
                    sx={{
                      fontSize: '50px',
                      color: 'blue',
                    }}
                  >
                    {userProfile?.fullName[0].toUpperCase()}
                  </Typography>
                </StyledAvatar>
                <Typography variant="h1">{userProfile?.fullName}</Typography>
                <Typography variant="h4">
                  {userProfile?.designation?.name} | Dept. of{' '}
                  {userProfile?.departments
                    ?.filter((item) => item?.institutionId == current?.id)
                    .map((item) => item.name)
                    .join(',')}
                </Typography>
              </Box>
            </Box>
            <Box>
              {classroomSubjects?.map((classroomSubject) => (
                <Chip
                  key={classroomSubject.classroomSubjectId}
                  label={`${classroomSubject?.subjectCode} - ${
                    classroomSubject.classroomName
                  }, ${Years(classroomSubject?.year)} year`}
                  sx={{
                    marginLeft: '1rem',
                    backgroundColor: '#149ECD1A',
                    fontWeight: 'bold',
                  }}
                />
              ))}
            </Box>
          </StyledBoxHeader>
        </Box>

        <StyledMainContainer>
          <StyledTabsContainer tabs={tabs} centered />
        </StyledMainContainer>
      </Container>
    </>
  )
}

export default MyProfile
