Untitled

'use client'

import { useState } from 'react'

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

import { IoIosArrowBack } from 'react-icons/io'
import { LuClipboardCopy } from 'react-icons/lu'
import {
  AiOutlineExclamationCircle,
  AiOutlineExport,
  AiOutlineForm,
  AiOutlineUserAdd,
  AiOutlineUserDelete
} from 'react-icons/ai'
import CustomTextField from '@/@core/components/mui/TextField'
import { BaseModal } from '@/components/shared/BaseModal'
import { FaRegCheckCircle } from 'react-icons/fa'

const CouponsCreated = () => {
  const [regiterNumber, setRegisterNumber] = useState('')
  const [deletePromoters, setDeletePromoters] = useState(false)
  const [removePromotersSuccess, setRemovePromotersSuccess] = useState(false)
  const [copiedSuccess, setCopiedSuccess] = useState(false)
  const [addCode, setAddCode] = useState(false)

  const [editGroupName, setEditGroupName] = useState(false)
  const [groupName, setGroupName] = useState('Grupo teste')

  const modalDeletePromoters = () => {
    setDeletePromoters(false)
    setRemovePromotersSuccess(true)
  }

  const copySuccess = () => {
    setCopiedSuccess(true)
    setTimeout(() => {
      setCopiedSuccess(false)
    }, 2000)
  }

  const toEdditPromoter = () => {
    setAddCode(false)
    // setGroupName('Grupo teste')
    setEditGroupName(false)
  }

  return (
    <>
      <Card sx={{ width: '100%' }}>
        <CardContent sx={{}}>
          <Box style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 32, gap: 16 }}>
            <Button
              variant='outlined'
              style={{
                width: '100%',
                color: 'aliceblue',
                backgroundColor: '#008ed8',
                border: 'none'
              }}
              onClick={() => {}}
            >
              <AiOutlineExport style={{ fontSize: 16, marginRight: 8 }} />
              Descontos
            </Button>

            <Button
              variant='outlined'
              style={{
                border: 'none',
                width: '100%',
                color: 'aliceblue',
                backgroundColor: '#ff004c'
              }}
              onClick={() => setDeletePromoters(true)}
            >
              <AiOutlineUserDelete style={{ fontSize: 16, marginRight: 8 }} />
              Remover todos os códigos
            </Button>

            <Button
              variant='outlined'
              style={{
                border: 'none',
                width: '100%',
                color: 'aliceblue',
                backgroundColor: '#00dc75'
              }}
              onClick={() => setAddCode(true)}
            >
              <AiOutlineUserAdd style={{ fontSize: 16, marginRight: 8 }} />
              Adicionar Promoter
            </Button>

            <Button
              variant='outlined'
              style={{
                border: 'none',
                width: '100%',
                backgroundColor: '#00d5ea',
                color: '#fff'
              }}
              onClick={copySuccess}
            >
              <LuClipboardCopy style={{ fontSize: 16, marginRight: 8 }} />
              Copiar todos os cupons
            </Button>
          </Box>

          <Typography fontWeight={700} style={{ fontSize: 13, marginBottom: 4 }}>
            Nome do grupo
          </Typography>

          {!editGroupName ? (
            <Box style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Typography fontWeight={800} style={{ marginTop: 4, fontSize: 18, color: 'white' }}>
                {groupName}
              </Typography>

              <Box
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  cursor: 'pointer',
                  marginTop: 2
                }}
                onClick={() => setEditGroupName(true)}
              >
                <AiOutlineForm color='white' fontSize={20} />
              </Box>
            </Box>
          ) : (
            <Box
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 16
              }}
            >
              <CustomTextField
                fullWidth
                placeholder={regiterNumber}
                value={groupName}
                onChange={({ target }) => setGroupName(target.value)}
                style={{
                  width: 'calc(25% - 16px)',
                  background: 'rgb(38, 37, 60)',
                  borderRadius: 8,
                  color: 'white'
                }}
              />

              <Button variant='outlined' style={{}} onClick={() => setEditGroupName(false)}>
                S
              </Button>
            </Box>
          )}

          <FormControl
            fullWidth
            sx={{ marginTop: 4, marginBottom: 4, display: 'flex', justifyContent: 'space-between' }}
          >
            <Box
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginTop: 4
              }}
            >
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 8,
                  marginLeft: -14
                }}
              >
                {/* <Link href={`/panel/event/${}/batch`} style={{ textDecoration: 'none' }}> */}
                <IconButton>
                  <IoIosArrowBack
                  //  color={theme.palette.grey[300]} style={{ marginLeft: -10 }}
                  />
                </IconButton>
                {/* </Link> */}
                <Typography variant='h5' fontWeight={700}>
                  Quantidade de cupons
                </Typography>
              </div>

              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                <FormControl fullWidth style={{ fontSize: 13 }}>
                  <Box>
                    <Typography fontWeight={700} style={{ fontSize: 13, marginBottom: 2 }}>
                      Criar um novo Código?
                    </Typography>
                    <Select
                      labelId='demo-simple-select-label'
                      id='demo-simple-select'
                      sx={{
                        height: 30,
                        width: 200,
                        '.MuiSelect-select': {
                          padding: '4px 14px'
                        }
                      }}
                    >
                      <MenuItem value='actived' onClick={() => {}} sx={{ padding: '4px 14px' }}>
                        Criar um novo Código?
                      </MenuItem>
                    </Select>
                  </Box>
                </FormControl>
              </Box>
            </Box>

            <Typography
              variant='h5'
              style={{
                display: 'flex',
                fontWeight: 700,
                marginTop: 16,
                borderLeft: '3px solid #00b5eb',
                paddingLeft: 8
              }}
            >
              Cupons
            </Typography>

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

            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <FormControl fullWidth style={{ fontSize: 13, margin: '32px 0px 16px 0px' }}>
                <Box>
                  <Typography variant='h6' style={{ fontSize: 13, marginBottom: 2 }}>
                    Mostrar Registros
                  </Typography>

                  <FormControl sx={{ m: 1, minWidth: 90 }}>
                    <Select
                      value={regiterNumber}
                      onChange={({ target }) => setRegisterNumber(target.value)}
                      displayEmpty
                      inputProps={{ 'aria-label': 'Without label' }}
                      sx={{
                        height: 30,
                        '.MuiSelect-select': {
                          padding: '4px 14px'
                        }
                      }}
                    >
                      <MenuItem value='' disabled>
                        <em>{regiterNumber || '25'}</em>
                      </MenuItem>
                      {[1, 2, 3, 4, 5].map(number => (
                        <MenuItem key={number} value={number} sx={{ padding: '4px 14px' }}>
                          {number}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                </Box>
              </FormControl>

              <Box>
                <FormControl fullWidth style={{ fontSize: 13, margin: '32px 0px 16px 0px' }}>
                  <Typography fontWeight={700} style={{ fontSize: 13 }}>
                    Buscar
                  </Typography>

                  <CustomTextField fullWidth />
                </FormControl>
              </Box>
            </Box>
          </FormControl>

          <Box
            style={{
              fontSize: 13,
              marginBottom: 2,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              background: '#26253c',
              borderRadius: 8,
              minHeight: 50
            }}
          >
            {regiterNumber.length === 0 ? (
              <Typography
                fontWeight={700}
                style={{
                  fontSize: 13,
                  marginBottom: 2,
                  minHeight: 50,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  textAlign: 'center'
                }}
              >
                Nenhum registro encontrado
              </Typography>
            ) : (
              regiterNumber
            )}
          </Box>
        </CardContent>
      </Card>
      <BaseModal
        isOpen={deletePromoters}
        nextBtnName='Sim, remover!'
        closeBtnName='Cancelar'
        onClose={() => setDeletePromoters(false)}
        onNext={modalDeletePromoters}
        widthBtn={140}
      >
        <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}>
            Remover todos os promoters?
          </Typography>
          <Typography variant='h6' width={'500px'} align='center'>
            Você não poderá reverter isso!
          </Typography>
        </CardContent>

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

      <BaseModal
        isOpen={removePromotersSuccess}
        nextBtnName='Ok'
        onNext={() => setRemovePromotersSuccess(false)}
        widthBtn={140}
      >
        <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}>
            Removido!
          </Typography>
          <Typography variant='h6' width={'500px'} align='center'>
            Todos os promoters foram removidos com sucesso
          </Typography>
        </CardContent>
      </BaseModal>

      <BaseModal isOpen={copiedSuccess} nextBtnName='Confirmar' onNext={() => setCopiedSuccess(false)} widthBtn={140}>
        <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}>
            Cupons copiados com sucesso
          </Typography>
        </CardContent>
      </BaseModal>

      <BaseModal
        isOpen={addCode}
        closeBtnName='Cancelar'
        nextBtnName='Criar Código'
        onNext={() => setAddCode(false)}
        onClose={toEdditPromoter}
        widthBtn={140}
      >
        <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}>
            Adicionar Código
          </Typography>
          <CustomTextField
            fullWidth
            placeholder={regiterNumber}
            value={groupName}
            onChange={({ target }) => setGroupName(target.value)}
            style={{
              background: 'rgb(38, 37, 60)',
              borderRadius: 8,
              color: 'white'
            }}
          />
        </CardContent>
      </BaseModal>
    </>
  )
}
export default CouponsCreated
function prev(): import('react').SetStateAction<boolean> {
  throw new Error('Function not implemented.')
}