Untitled

'use client'

import { useEffect, useState } from 'react'

import { useParams } from 'next/navigation';

import { Box, Button, Card, CardContent, Divider, FormControl, Icon, MenuItem, Select, Typography } from '@mui/material'

import { BsQuestionCircle } from 'react-icons/bs'
import { AiOutlineExclamationCircle } from "react-icons/ai";

import { FaRegCheckCircle } from 'react-icons/fa';

import { BaseModal } from '@/components/shared/BaseModal'
import CustomTextField from '@/@core/components/mui/TextField'
import CouponsCreated from '../../components/CouponsCreated';


const ManageCreateCupons = () => {
  const [alertcreateGroup, setAlertcreateGroup] = useState(false)
  const [openNewGroupModal, setOpenNewGroupModal] = useState(false)
  const [createGroup, setCreateGroup] = useState(false)
  const [groupNameValue, setGroupNameValue] = useState('')
  const [createGroupSuccess, setCreateGroupSuccess] = useState(false)

  const { eventHash } = useParams()

  useEffect(() => {

    const timer = setTimeout(() => {
      setCreateGroupSuccess(false)
    }, 1000);

    return () => clearTimeout(timer);
  }, [createGroupSuccess]);


  const handleSaveGroup = () => {
    if (!groupNameValue.length) {
      setAlertcreateGroup(true)
    } else {
      setCreateGroupSuccess(true)
      // redirect user
      setGroupNameValue('')
    }
  }

  const creategroup = () => {
    setOpenNewGroupModal(false)
    setCreateGroup(true)
  }

  return (
    <>
      <Card sx={{ width: '100%' }}>
        <CardContent sx={{ position: 'relative' }}>
          <Typography variant='h5' fontWeight={700}>
            Selecione ou crie seu grupo
          </Typography>

          <Divider sx={{ marginTop: 4, marginBottom: 4 }} />

          <FormControl fullWidth>
            <Typography fontWeight={700} style={{ fontSize: 13, marginBottom: 2 }}>
              Grupo
            </Typography>

            <Select labelId='demo-simple-select-label' id='demo-simple-select' style={{ maxHeight: 36 }}>
              <MenuItem value='actived' onClick={() => setOpenNewGroupModal(true)}>Criar um novo grupo ?</MenuItem>
            </Select>
            {createGroup ?
              <Box >
                <FormControl fullWidth style={{ fontSize: 13, margin: '32px 0px 16px 0px' }}>
                  <Typography variant='h6' fontWeight={700}>
                    Criar grupo
                  </Typography>

                  <Divider sx={{ marginTop: 4, marginBottom: 4 }} />

                  <CustomTextField
                    style={{ fontSize: 13, marginTop: 4, }}
                    fullWidth
                    label='Nome do grupo'
                    placeholder='Nome do grupo'
                    value={groupNameValue}
                    onChange={({ target }) => setGroupNameValue(target.value)}
                  />


                </FormControl>
                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 4, marginTop: 4 }}>
                  <Button variant='outlined' style={{ minWidth: 132, color: 'aliceblue' }} onClick={() => setCreateGroup(false)}>
                    Cancelar
                  </Button>
                  <Button variant='contained' style={{ minWidth: 132 }} onClick={handleSaveGroup}>
                    Salvar Grupo
                  </Button>
                </Box>
              </Box>
              :
              <Typography variant='h6' style={{ marginTop: 16 }}>
                * Para criar um novo grupo basta digitar o nome do grupo e escolher a opção criar novo
              </Typography>
            }

          </FormControl>
        </CardContent>
      </Card>

      <BaseModal
        isOpen={openNewGroupModal}
        nextBtnName='Sim'
        closeBtnName='Não'
        onClose={() => setOpenNewGroupModal(false)}
        onNext={creategroup}
        widthBtn={110}
      >
        <CardContent sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          gap: 8

        }}
        >
          <Icon style={{ width: 80, height: 80 }}>
            <BsQuestionCircle style={{ width: 80, height: 80 }} />
          </Icon>

          <Typography variant='h4' width={'500px'} align='center' fontWeight={700}>
            Você deseja criar um novo grupo ?
          </Typography>

        </CardContent>


        <Divider style={{ marginTop: 12, marginBottom: 36 }} />
      </BaseModal>

      <BaseModal
        isOpen={alertcreateGroup}
        nextBtnName='Ok'
        onClose={() => setAlertcreateGroup(false)}
        onNext={() => setAlertcreateGroup(false)}
        widthBtn={110}
      >
        <CardContent sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          gap: 8
        }}
        >
          <Icon style={{ width: 80, height: 80 }}>
            <AiOutlineExclamationCircle style={{ width: 80, height: 80 }} />
          </Icon>

          <Typography variant='h4' width={'500px'} align='center' fontWeight={700}>
            Erro Interno
          </Typography>
          <Typography variant='h6' width={'500px'} align='center' >
            Ocorreu um erro interno, tente novamente mais tarde
          </Typography>

        </CardContent>


        <Divider style={{ marginTop: 12, marginBottom: 36 }} />
      </BaseModal>

      <BaseModal
        isOpen={createGroupSuccess}

        widthBtn={110}
      >
        <CardContent sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          gap: 8

        }}
        >
          <Icon style={{ width: 80, height: 80 }}>
            <FaRegCheckCircle style={{ width: 80, height: 80, color: '#00dc75' }} />
          </Icon>
          <Typography variant='h4' width={'500px'} align='center' fontWeight={700}>
            Grupo Criado com Sucesso
          </Typography>
        </CardContent>
      </BaseModal>


    </>
  )
}

export default ManageCreateCupons