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

import { TYPE_MENU_OPTIONS } from '@/modules/feeds/SelfServeList/constants';

import { typeToUrlSegment } from '@/modules/feeds/SelfServeList/helpers';

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

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

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

function Empty() {
  const router = useRouter();
  const [showCreateMenu, setShowCreateMenu] = useState<HTMLButtonElement | null>(null);

  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 your first source
        </Typography>
        <>
          <Button
            size="small"
            variant="contained"
            color="primary"
            startIcon={<AddRounded />}
            onClick={({ currentTarget }) => setShowCreateMenu(currentTarget)}
          >
            Source
          </Button>
          <Menu anchorEl={showCreateMenu} open={Boolean(showCreateMenu)} onClose={() => setShowCreateMenu(null)}>
            {TYPE_MENU_OPTIONS.map((menu) => (
              <MenuItem key={menu.value} onClick={() => router.push(`/feeds/new/${typeToUrlSegment(menu.value)}`)}>
                {menu.label}
              </MenuItem>
            ))}
          </Menu>
        </>
      </Stack>
    </Grid>
  );
}

export default Empty;
