/* eslint-disable prefer-const */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from 'react'
import Link from 'next/link'
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api'
import { Auth, API } from 'aws-amplify'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'
import Moment from 'moment'

import * as customQueries from '@app/graphql/custom-queries'
import React from 'react'
import { ConsoleLogger } from '@aws-amplify/core'
import DataValues from '@app/lib/data-values'

interface PropsButton {
  label: string
  onSelect: (value: string) => void
}

interface IReportCurrentData {
  id: string
  userID: string
  tag: string
  notes: string
  message: string
  page: string
  manufacturer: string
  model: string
  osName: string
  osVersion: string
  platform: string
  uuid: string
  ip: string
  city: string
  region: string
  country: string
  provider: string
  lat: number
  lng: number
  createdAt: string
  updatedAt: string
  user: {
    name: string
    email: string
    phone: string
    active: boolean
    avatar: null
  }
}

export default function Quicksight(): JSX.Element {
  const [reportsData, setReportsData] = useState<IReportCurrentData[]>([])
  const [emittersData, setEmittersData] = useState([] as any)
  const [searchUser, setSearchUser] = useState<string[]>([])
  const [dateFilter, setDateFilter] = useState({
    minDate: Moment().format('YYYY-MM-DD'),
    maxDate: Moment().format('YYYY-MM-DD'),
  })

  function onChangeMinDate(e: any) {
    const value = e.nativeEvent.target.value
    setDateFilter((prev) => ({
      ...prev,
      minDate: Moment(value).format('YYYY-MM-DD'),
    }))
  }

  function onChangeMaxDate(e: any) {
    const value = e.nativeEvent.target.value
    setDateFilter((prev) => ({
      ...prev,
      maxDate: Moment(value).format('YYYY-MM-DD'),
    }))
  }

  async function listEmitters(limit: number) {
    let nextToken: any
    const apiName = 'AdminQueries'
    const path = '/listUsersInGroup'
    const myInit = {
      queryStringParameters: {
        groupname: 'Emitters',
        limit: limit,
        token: nextToken,
      },
      headers: {
        'Content-Type': 'application/json',
        Authorization: `${(await Auth.currentSession())
          .getAccessToken()
          .getJwtToken()}`,
      },
    }
    const { NextToken, ...rest } = await API.get(apiName, path, myInit)
    nextToken = NextToken
    return rest
  }

  async function listEmittersArray() {
    const map = await listEmitters(60)
    const result: any = Object.keys(map).map(
      (key) => newFunction(map, key) as any
    )
    setEmittersData(result[0])
    console.log(emittersData)
  }

  useEffect(() => {
    listEmittersArray()
  }, [])

  async function listReports() {
    const reports = await API.graphql({
      query: customQueries.listLogsByTagCreatedAtCustom,
      variables: { createdAt: { ge: '0' }, tag: 'REPORT_CREATE' },
      authMode: GRAPHQL_AUTH_MODE.API_KEY,
    })
    return reports
  }

  const listReportsArray = async () => {
    const map = await listReports()
    const result: any = Object.keys(map).map(
      (key) => newFunction(map, key) as any
    )
    setReportsData(result[0].listLogsByTagCreatedAt.items)
    console.log(reportsData)
  }

  useEffect(() => {
    listReportsArray()
  }, [])

  console.log(dateFilter)

  const EmittersComponent: React.FC<PropsButton> = ({ label, onSelect }) => {
    const [checked, setChecked] = useState(false)

    function handleSelect() {
      onSelect(label)
      setChecked((prev) => !prev)
    }

    return (
      <div className="grid grid-cols-3 gap-3 lg:grid-cols-2">
        <li className="mt-4 flex items-start">
          <div className="flex items-center h-5">
            <input
              type="checkbox"
              onChange={handleSelect}
              checked={checked}
              className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
            />
          </div>
          <div className="ml-3 text-sm">
            <span className="font-medium text-gray-700">
              {label || 'Sem nome'}
            </span>
          </div>
        </li>
      </div>
    )
  }

  function handleToggle(label: string) {
    setSearchUser((prev) =>
      prev.some((item) => item === label)
        ? prev.filter((item) => item !== label)
        : [...prev, label]
    )
  }

  const emittersComponent = () => (
    <div>
      {emittersData.map((value: any, index: any) => (
        <EmittersComponent
          key={index}
          label={value.Attributes[2]?.Value}
          onSelect={handleToggle}
        />
      ))}
    </div>
  )

  return (
    <>
      <div className="lg:px-8 my-8">
        <span className="text-xl font-medium text-accent-9">
          Escolha o período
        </span>
        <div className="my-3 flex flex-nowrap">
          <input
            className="bg-accent-1 mx-2 rounded-full px-3 py-2 outline-none border-none appearance-none transition duration-150 ease-in-out"
            type="date"
            value={dateFilter.minDate}
            id="dateBegin"
            name="dateBegin"
            onChange={onChangeMinDate}
          />
          <input
            className="bg-accent-1 mx-2 rounded-full px-3 py-2 outline-none border-none appearance-none transition duration-150 ease-in-out"
            type="date"
            value={dateFilter.maxDate}
            id="dateEnd"
            name="dateEnd"
            onChange={onChangeMaxDate}
          />
        </div>
        <div className="my-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-6">
            <div>
              <span className="text-xl font-medium text-accent-9">
                Escolha os emissores:
              </span>
              <ul>{emittersComponent()}</ul>
            </div>
            <div>
              <div className="bg-accent-1 my-8 w-96 rounded-md p-4 text-center flex justify-center items-center">
                <div className="grid grid-cols-1">
                  <span className="font-bold uppercase">
                    Laudos emitidos no período:
                  </span>
                  <span className="text-6xl font-bold">
                    {
                      reportsData
                        .filter((value: any) =>
                          searchUser.length > 0
                            ? searchUser.includes(value.user.name)
                            : true
                        )
                        .filter(
                          (value) =>
                            dateFilter.minDate &&
                            dateFilter.maxDate &&
                            Moment(
                              Moment(value.createdAt).format('YYYY-MM-DD')
                            ).valueOf() >=
                              Moment(dateFilter.minDate).valueOf() &&
                            Moment(
                              Moment(value.createdAt).format('YYYY-MM-DD')
                            ).valueOf() <= Moment(dateFilter.maxDate).valueOf()
                        ).length
                    }
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* <div className="lg:px-8 my-8 w-full h-96">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            width={1000}
            height={300}
            data={data}
            margin={{
              top: 5,
              right: 5,
              left: 5,
              bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar maxBarSize={80} dataKey="Laudos" fill="#1B9CE2" />
          </BarChart>
        </ResponsiveContainer>
      </div> */}
      <div className="lg:px-8 my-8">
        <div className="overflow-x-auto lg:px-8">
          <table className="table w-full table-zebra">
            <thead>
              <tr>
                <th>N°</th>
                <th>Emissor</th>
                <th>ID do Laudo</th>
                <th>Criado Em</th>
              </tr>
            </thead>
            <tbody>
              {reportsData
                .filter((value: any) =>
                  searchUser.length > 0
                    ? searchUser.includes(value.user.name)
                    : true
                )
                .filter(
                  (value) =>
                    dateFilter.minDate &&
                    dateFilter.maxDate &&
                    Moment(
                      Moment(value.createdAt).format('YYYY-MM-DD')
                    ).valueOf() >= Moment(dateFilter.minDate).valueOf() &&
                    Moment(
                      Moment(value.createdAt).format('YYYY-MM-DD')
                    ).valueOf() <= Moment(dateFilter.maxDate).valueOf()
                )
                .map((report: any, index) => (
                  <>
                    <tr
                      key={report.id}
                      className="hover transition-all duration-300"
                    >
                      <td>{index + 1}</td>
                      <td>{report.user.name}</td>
                      <td>
                        <Link href={report.page}>
                          <a className="text-accent-9 font-medium hover:underline hover:text-blue hover:font-bold transition-all duration-300">
                            {report.id}
                          </a>
                        </Link>
                      </td>
                      <td>
                        {Moment(report.createdAt).format('DD/MM/YYYY')} às{' '}
                        {Moment(report.createdAt).format('HH:mm:ss')}
                      </td>
                    </tr>
                  </>
                ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  )

  function newFunction(map: any, key: string): any {
    return map[key]
  }
}