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

import * as playerSelectors from '@/modules/players/Players/redux/selectors';
import { setAction } from '@/modules/players/Players/redux/slices';

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 dispatch = useDispatch();
  const typesOptions = useSelector(playerSelectors.typesOptionsSelector);
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  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 AnyClip Player
        </Typography>
        <Button size="medium" startIcon={<AddRounded />} onClick={({ currentTarget }) => setAnchorEl(currentTarget)}>
          Player
        </Button>
        <Menu anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)}>
          {typesOptions?.map((typeOption) => (
            <MenuItem
              key={typeOption.id}
              onClick={() => {
                dispatch(setAction({ newPlayerType: typeOption }));
                router.push(`/player/${typeOption.id}/new`);
              }}
            >
              {typeOption.name}
            </MenuItem>
          ))}
        </Menu>
      </Stack>
    </Grid>
  );
}

export default Empty;
