import Box from '@mui/material/Box'
import Modal from '@mui/material/Modal'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import React, { useState, useEffect } from 'react'
import Image from 'next/image'
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import ClientsTable from '../../../components/administrativeTables/ClientsTable'
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'
import Header from '../../../components/header/Header'

import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
import PageTitle from '../../../components/pageTitle/PageTitle'
import ConfirmModal from '../../../components/modal/ConfirmModal'
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
import { api } from '../../../services/api'
import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../../../services/ssrApi'

import FormData from 'form-data'
import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView'
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'

const style = {
  position: 'absolute' as const,
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 900,
  height: 500,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
  overflowY: 'scroll'
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
  props,
  ref
) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})

export default function clients({ clients, userName }) {
  const formData = new FormData()

  const [client, setClient] = useState<any>({
    name: String,
    email: String,
    password: String,
    password_confirmation: String,
    client_id: Number
  })
  const [logo, setLogo] = useState(false)
  const [selectedClients, setSelectedClients] = useState([])

  const [imageURLS, setImageURLs] = useState([])
  const [images, setImages] = useState([] as any)
  const [open, setOpen] = useState(false)
  const [openModalInativar, setOpenModalInativar] = useState(false)
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  const [openModal, setOpenModal] = useState(false)
  const [nivelAcess, setnivelAcess] = useState<any>(2);
  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
  const [openSnackError, setOpenSnackError] = useState<boolean>(false)
  const [openSnackSuccessDelete, setOpenSnackSuccessDelete] =
    useState<boolean>(false)
  const [openSnackErrorDelete, setOpenSnackErrorDelete] =
    useState<boolean>(false)

  const handleCloseSnack = (
    event?: React.SyntheticEvent | Event,
    reason?: string
  ) => {
    if (reason === 'clickaway') {
      return
    }

    setOpenSnackError(false)
    setOpenSnackSuccess(false)
  }

  const handleCloseSnackDelete = (
    event?: React.SyntheticEvent | Event,
    reason?: string
  ) => {
    if (reason === 'clickaway') {
      return
    }

    setOpenSnackErrorDelete(false)
    setOpenSnackSuccessDelete(false)
  }

  function handleCreateClient({
    name,
    email,
    password,
    password_confirmation,
    client_id
  }) {
    formData.append('name', name)
    formData.append('email', email)
    formData.append('password', password)
    formData.append('password_confirmation', password_confirmation)
    formData.append('client_id', client_id)
    formData.append('profile_picture', logo)
    formData.append('role', nivelAcess)

    api.post('/user', formData)
      .then((res) => {
        setOpenSnackSuccess(true)
        setOpenModalInativar(false)
        window.location.reload()
      })
      .catch((res) => {
        setOpenSnackError(true)
      })
  }

  async function handleDeleteClient(id: any) {
    await id.map((client) => {
      api
        .delete(`/user/${client}`)
        .then((res) => {
          setOpenSnackSuccessDelete(true)
          setOpenModalInativar(false)
          window.location.reload()
        })
        .catch((res) => setOpenSnackErrorDelete(true))
    })
  }

  useEffect(() => {
    if (images.length < 1) return
    const newImageUrls: any = []
    images.forEach((image: any) =>
      newImageUrls.push(URL.createObjectURL(image))
    )
    setImageURLs(newImageUrls)
  }, [images])

  function onImageChange(e: any) {
    setImages([...e.target.files])
    setLogo(e.target.files[0])
  }

  console.table(clients.map(client => {
    if (Number.parseInt(client.client_id) === 59641651) return client
    return
  }))
  console.table(clients[417])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
      <Snackbar
        open={openSnackSuccess}
        autoHideDuration={4000}
        onClose={handleCloseSnack}
      >
        <Alert
          onClose={handleCloseSnack}
          severity="success"
          sx={{ width: '100%' }}
        >
          Cliente cadastrada com Sucesso!
        </Alert>
      </Snackbar>
      <Snackbar
        open={openSnackError}
        autoHideDuration={4000}
        onClose={handleCloseSnack}
      >
        <Alert
          onClose={handleCloseSnack}
          severity="error"
          sx={{ width: '100%' }}
        >
          Cliente não cadastrado!
        </Alert>
      </Snackbar>

      <Snackbar
        open={openSnackSuccessDelete}
        autoHideDuration={4000}
        onClose={handleCloseSnackDelete}
      >
        <Alert
          onClose={handleCloseSnackDelete}
          severity="success"
          sx={{ width: '100%' }}
        >
          Cliente excluido com sucesso!
        </Alert>
      </Snackbar>
      <Snackbar
        open={openSnackErrorDelete}
        autoHideDuration={4000}
        onClose={handleCloseSnackDelete}
      >
        <Alert
          onClose={handleCloseSnackDelete}
          severity="error"
          sx={{ width: '100%' }}
        >
          Cliente não excluido!
        </Alert>
      </Snackbar>

      <ClientsView>
        <Header name={userName} admin />
        <PageTitle title="Clientes" subtitle="Clientes Smart Energia" />
        <div className="buttons">
          <button className="btn2" onClick={handleOpen}>
            Adicionar
          </button>
          <button className="btn1" onClick={() => setOpenModalInativar(true)}>
            Inativar
          </button>
        </div>
        <section>
          <ClientsTable
            clients={clients}
            onChange={(value) => {
              setSelectedClients(value)
            }}
          />
        </section>
      </ClientsView>

      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <h1>Adicionar Cliente</h1>
          <Typography
            sx={{ color: 'gray', fontSize: 12 }}
            variant="h5"
            gutterBottom
            component="div"
          >
            Adicionar Cliente Smart Energia
          </Typography>
          <br />
          <TextField
            id="outlined-basic"
            label="Nome"
            sx={{ width: 350, ml: 5 }}
            onChange={(value) => {
              setClient({
                ...client,
                name: value.target.value
              })
            }}
            variant="outlined"
          />
          <TextField
            id="outlined-basic"
            label="E-mail/Usuário"
            value={client.email}
            sx={{ width: 350, ml: 8 }}
            onChange={(value) => {
              setClient({
                ...client,
                email: value.target.value.toLowerCase()
              })
            }}
            variant="outlined"
          />
          <TextField
            id="outlined-basic"
            label="Senha"
            sx={{ width: 350, ml: 5, mt: 2 }}
            onChange={(value) => {
              setClient({
                ...client,
                password: value.target.value
              })
            }}
            variant="outlined"
          />
          <TextField
            id="outlined-basic"
            label="Confirma Senha"
            sx={{ width: 350, ml: 8, mt: 2 }}
            onChange={(value) => {
              setClient({
                ...client,
                password_confirmation: value.target.value
              })
            }}
            variant="outlined"
          />
          <TextField
            id="outlined-basic"
            label="Codigo do Cliente Smart Energia"
            sx={{ width: 350, ml: 5, mt: 2 }}
            onChange={(value) => {
              setClient({
                ...client,
                client_id: value.target.value
              })
            }}
            variant="outlined"
          />
          <InputUploadView>
            <div className="imgContainer">
              <article>
                {imageURLS.map((imageSrc, index) => {
                  return <Image
                    src={imageSrc}
                    key={index}
                    width={30}
                    height={30}
                    className="image"
                  />
                })}
              </article>
            </div>
            <div className="update">
              <form action="">
                <div>
                  <label htmlFor="arquivo">
                    {' '}
                    <p className="TitleButton"> Enviar foto de Perfil </p>{' '}
                  </label>
                  <input
                    type="file"
                    name="arquivo"
                    id="arquivo"
                    onChange={onImageChange}
                  />
                </div>
              </form>
            </div>
          </InputUploadView>


          <div className='select'>

          <FormControl sx={{ width: 350, ml: 5, mt: 2 }}>
            <InputLabel id="demo-select-small">Nivel de acesso</InputLabel>
            <Select
              labelId="demo-select-small"
              id="demo-select-small"
              value={nivelAcess}
              label="Unidade"
              onChange={value => setnivelAcess(value.target.value)}
              fullWidth
            >
              <MenuItem value={1}>Administrador</MenuItem>
              <MenuItem value={2}>Cliente</MenuItem>

            </Select>
          </FormControl>
        </div>

          <FaqButton1 title="Cancelar" onClick={() => setOpen(false)} />
          <FaqButton2
            title="Salvar"
            onClick={() => handleCreateClient(client)}
          />
        </Box>
      </Modal>

      <ConfirmModal
        open={openModalInativar}
        handleIsClose={(value) => {
          setOpenModalInativar(value)
        }}
      >
        <PageTitle
          title="Inativar Cliente(s)"
          subtitle="deseja realmente inativar os clientes selecionadas?"
        />
        <ConfirmModalView>
          <BasicButton
            title="Confirmar"
            onClick={() => handleDeleteClient(selectedClients)}
          />
          <BasicButton
            title="Cancelar"
            onClick={() => setOpenModalInativar(false)}
          />
        </ConfirmModalView>
      </ConfirmModal>
    </div>
  )
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const apiClient = getAPIClient(ctx)
  const { ['@smartAuth-token']: token } = parseCookies(ctx)
  const { ['user-name']: userName } = parseCookies(ctx)
  let clients = []

  await apiClient
    .get('/user')
    .then((res) => {
      // console.log(res)
      clients = res.data.data
      // console.log(clients)
    })
    .catch((res) => {
      // console.log(res)
    })

  if (!token) {
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }

  return {
    props: {
      clients,
      userName
    }
  }
}