import React, { useState } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { AddRounded } from '@mui/icons-material';

import {
  PROVIDER_CREATE_URL_AZURE,
  PROVIDER_CREATE_URL_GOOGLE,
  PROVIDER_CREATE_URL_OKTA,
  PROVIDER_VALUE_AZURE,
  PROVIDER_VALUE_GOOGLE,
  PROVIDER_VALUE_OKTA,
  PROVIDERS,
} from '@/modules/sso/List/constants';

import { Button, Grid, Menu, MenuItem, Stack, Typography } from '@/mui/components';

import EmptyLogo from '@/assets/img/empty.svg';

import styles from './Empty.module.scss';

const getProviderLabel = (value) => PROVIDERS.find((provider) => provider.value === value)?.label;

function Empty() {
  const [showCreateSsoProviderList, setShowCreateSsoProviderList] = useState(null);
  const router = useRouter();

  const handleNewProvide = (provider) => {
    router.push(`/sso/${provider}`);
  };

  return (
    <Grid container className={styles.EmptyWrapper}>
      <Stack spacing={10} alignItems="center" justifyContent="center" className={styles.EmptyContent}>
        <Image src={EmptyLogo} width={175} height={175} alt="empty-logo" />
        <Typography variant="h6" color="text.primary" fontWeight={500}>
          Click below to create New SSO
        </Typography>
        <>
          <Button
            size="small"
            variant="contained"
            color="primary"
            startIcon={<AddRounded />}
            onClick={({ currentTarget }) => setShowCreateSsoProviderList(currentTarget)}
          >
            SSO
          </Button>
          <Menu
            anchorEl={showCreateSsoProviderList}
            open={Boolean(showCreateSsoProviderList)}
            onClose={() => setShowCreateSsoProviderList(null)}
          >
            <MenuItem onClick={() => handleNewProvide(PROVIDER_CREATE_URL_GOOGLE)}>
              {getProviderLabel(PROVIDER_VALUE_GOOGLE)}
            </MenuItem>
            <MenuItem onClick={() => handleNewProvide(PROVIDER_CREATE_URL_AZURE)}>
              {getProviderLabel(PROVIDER_VALUE_AZURE)}
            </MenuItem>
            <MenuItem onClick={() => handleNewProvide(PROVIDER_CREATE_URL_OKTA)}>
              {getProviderLabel(PROVIDER_VALUE_OKTA)}
            </MenuItem>
          </Menu>
        </>
      </Stack>
    </Grid>
  );
}

export default Empty;
