import React from 'react'
import {
  Box,
  Button,
  Container,
  Grid,
  GridItem,
  Heading,
  Image,
  Table,
  TableContainer,
  Tbody,
  Td,
  Text,
  Tr,
  useColorModeValue
} from '@chakra-ui/react'
import {useHookstate} from '@hookstate/core'
import {loggedInUser} from '../../stateManagement/userState'
import {Link} from 'react-router-dom'

const UserProfile = () => {
  const user = useHookstate(loggedInUser).get()
  const bg = useColorModeValue('white', 'gray.700')

  return (
      <Container maxW={'5xl'} my={'5rem'} centerContent>
        <Heading mb={'1rem'} as="h1">User Profile</Heading>
        <Grid templateColumns={`repeat(7, 1fr)`} templateRows={'2'} gap={6}>
          <GridItem rowStart={1} rowEnd={1} colStart={7} alignSelf={'end'} justifySelf={'end'}>
            <Button as={Link} to={`/edit-user`} colorScheme="blue" style={{textAlign: 'right'}}>
              <Text mt={'1'}>
                Edit
              </Text>
            </Button>
          </GridItem>
          <GridItem rowStart={2} rowEnd={2} colSpan={2} colStart={2}>
            <Box display={'flex'} alignItems={'center'}>
              <Image bg={bg} p="5" rounded="md" objectFit={'cover'} src={user.avatar}
                     alt={`${user.displayName} Avatar`}/>
            </Box>
          </GridItem>
          <GridItem rowStart={2} rowEnd={2} colStart={4} colEnd={8}>
            <Box bg={bg} p="5" rounded="md">
              <TableContainer>
                <Table variant="simple">
                  <Tbody>
                    <Tr>
                      <Td><Text fontSize={'1.5rem'}>Display Name: </Text></Td>
                      <Td><Text fontSize={'1.5rem'}>{user.displayName}</Text></Td>
                    </Tr>
                    <Tr>
                      <Td><Text fontSize={'1.5rem'}>Full Name: </Text></Td>
                      <Td><Text fontSize={'1.5rem'}>{user.name}</Text></Td>
                    </Tr>
                    <Tr>
                      <Td><Text fontSize={'1.5rem'}>Email: </Text></Td>
                      <Td><Text fontSize={'1.5rem'}>{user.email}</Text></Td>
                    </Tr>
                    <Tr>
                      <Td><Text fontSize={'1.5rem'}>Role: </Text></Td>
                      <Td><Text fontSize={'1.5rem'}>{user.role}</Text></Td>
                    </Tr>
                  </Tbody>
                </Table>
              </TableContainer>
            </Box>
          </GridItem>
        </Grid>
      </Container>
  )
}

export default UserProfile
