import { Box, Button, Stack, Typography, styled } from '@mui/material'
import { format } from 'date-fns-tz'
import { useMutation } from 'react-query'
import { toast } from 'react-toastify'
import { location, mobile, web } from '../../assets/images'
import axios from '../../config/axios'
import useConfirm from '../PopupConfirm/useConfirm'

const StyledIconContainer = styled(Box)(({ theme }) => ({
  backgroundColor: '#ED90350F',
  borderRadius: '10px',
  border: '1px solid #ED903580',
  width: '60px',
  height: '60px',
  padding: '17px 0px 0px 17px',
}))

const StyledTrustedContainer = styled(Box)(({ theme }) => ({
  backgroundColor: '#F4A101',
  borderRadius: '15px',
  padding: '3px 15px',
}))

export const DeviceInformationCard = ({ sessionData, refetch }) => {
  const { isConfirmed } = useConfirm()

  const { mutate: logout } = useMutation(
    () =>
      axios.post('/auth-server/auth/logout-active-sessions', {
        deviceInformationId: sessionData?.deviceInformation?._id,
      }),
    {
      onSuccess: () => {
        refetch()
      },
      onError: (error: any) => {
        toast.error(error?.response?.data?.message)
      },
    },
  )
  const handleLogout = async () => {
    const confirmed = await isConfirmed(
      'Are you sure you want to logout from this device?',
    )
    if (confirmed) logout()
  }
  return (
    <Box
      width="100%"
      border="1px solid #1212121A"
      borderRadius="10px"
      padding="20px 0px 20px 0px"
    >
      <Stack
        direction="row"
        gap={2}
        alignItems="center"
        justifyContent="space-around"
      >
        <Stack direction="row" alignItems="center" gap={2}>
          <StyledIconContainer>
            <img
              src={sessionData.type == 'WEB' ? web.default : mobile.default}
            />
          </StyledIconContainer>
          <Stack>
            <Stack direction="row" alignItems="center" gap={1}>
              <Typography variant="h1" fontSize="15px">
                {`${sessionData?.deviceInformation?.clientName} (${sessionData?.deviceInformation?.os})`}
              </Typography>
              {sessionData?.deviceInformation?.trusted && (
                <StyledTrustedContainer>
                  <Typography variant="subtitle1" color="white" fontSize="12px">
                    Trusted
                  </Typography>
                </StyledTrustedContainer>
              )}
            </Stack>
            <Typography variant="caption">{`Last Active on ${format(
              new Date(sessionData?.lastAccessedAt),
              'dd MMM, yyyy hh:mm a',
            )}`}</Typography>
          </Stack>
        </Stack>
        <Stack direction="row" alignItems="center" gap={1}>
          <img src={location.default} />
          <Typography variant="caption">
            {sessionData?.deviceInformation?.locationName}
          </Typography>
        </Stack>
        <Button onClick={handleLogout} variant="outlined">
          Logout
        </Button>
      </Stack>
    </Box>
  )
}
