import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import Search from '../components/Search'
import Pagination from '../components/Pagination'
import ActivityTable from '../components/logs/ActivityTable'
import { makeApiRequest } from '../common'
import { getLogs } from '../httpServices/httpServiceLog'
import { useTranslations } from '../hooks/useTranslation'

const Logs = () => {
  const { t } = useTranslations()
  const { page } = useParams()
  const dispatch = useDispatch()
  const [currentPage, setCurrentPage] = useState(parseInt(page) || 1)
  // const { logs, loading, error } = useSelector(state => state.logs)
  const [logs, setLogs] = useState([])
  const [error, setError] = useState({})
  const [logLoading, setLogLoading] = useState(false)

  const handleSearch = searchTerm => {
    console.log('Searching for:', searchTerm)
  }

  const getLogs = async () => {
    console.log(currentPage)
    const logStatus = await makeApiRequest(
      `logs?current_page=${currentPage}`,
      'GET'
    )

    console.log(logStatus)

    if (logStatus.success) {
      setLogs(logStatus.data)
    } else {
      setError(logStatus)
    }
  }

  useEffect(() => {
    getLogs()
  }, [currentPage])

  if (error.message) {
    return (
      <div className='arcm-flex arcm-items-center arcm-justify-center arcm-py-[30px]'>
        <div className='arcm-text-center'>
          <div className='arcm-max-w-[80px] arcm-mx-auto'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              shape-rendering='geometricPrecision'
              text-rendering='geometricPrecision'
              image-rendering='optimizeQuality'
              fill-rule='evenodd'
              clip-rule='evenodd'
              viewBox='0 0 512 512'
            >
              <path
                fill-rule='nonzero'
                d='M256 0c70.686 0 134.69 28.658 181.016 74.984C483.342 121.31 512 185.314 512 256c0 70.686-28.658 134.69-74.984 181.016C390.69 483.342 326.686 512 256 512c-70.686 0-134.69-28.658-181.016-74.984C28.658 390.69 0 326.686 0 256c0-70.686 28.658-134.69 74.984-181.016C121.31 28.658 185.314 0 256 0z'
              />
              <path
                fill='#FEC901'
                d='M256 29.464c125.114 0 226.536 101.422 226.536 226.536S381.114 482.536 256 482.536 29.464 381.114 29.464 256 130.886 29.464 256 29.464z'
              />
              <path d='M256 341.492c14.453 0 26.168 11.717 26.168 26.171 0 14.453-11.715 26.167-26.168 26.167s-26.171-11.714-26.171-26.167c0-14.454 11.718-26.171 26.171-26.171zm19.55-39.211c-.88 22.063-38.246 22.092-39.1-.007-3.778-37.804-13.443-127.553-13.135-163.074.311-10.946 9.383-17.426 20.989-19.898 3.578-.765 7.513-1.136 11.477-1.132 3.986.007 7.932.4 11.514 1.165 11.988 2.554 21.401 9.301 21.398 20.444l-.045 1.117-13.098 161.385z' />
            </svg>
          </div>
          <h2 className='arcm-mt-4 arcm-text-lg arcm-font-semibold arcm-text-gray-600'>
            {t('no_logs_found')}
          </h2>
          <p className='arcm-mt-2 arcm-text-sm arcm-text-gray-500'>
            {t('no_logs_desc')}
          </p>
        </div>
      </div>
    )
  }
  return (
    <>
      {logs.length === 0 ? (
        <div className='arcm-flex arcm-items-center arcm-justify-center arcm-py-[30px]'>
          <div className='arcm-text-center'>
            <div className='arcm-max-w-[80px] arcm-mx-auto'>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                shape-rendering='geometricPrecision'
                text-rendering='geometricPrecision'
                image-rendering='optimizeQuality'
                fill-rule='evenodd'
                clip-rule='evenodd'
                viewBox='0 0 512 512'
              >
                <path
                  fill-rule='nonzero'
                  d='M256 0c70.686 0 134.69 28.658 181.016 74.984C483.342 121.31 512 185.314 512 256c0 70.686-28.658 134.69-74.984 181.016C390.69 483.342 326.686 512 256 512c-70.686 0-134.69-28.658-181.016-74.984C28.658 390.69 0 326.686 0 256c0-70.686 28.658-134.69 74.984-181.016C121.31 28.658 185.314 0 256 0z'
                />
                <path
                  fill='#FEC901'
                  d='M256 29.464c125.114 0 226.536 101.422 226.536 226.536S381.114 482.536 256 482.536 29.464 381.114 29.464 256 130.886 29.464 256 29.464z'
                />
                <path d='M256 341.492c14.453 0 26.168 11.717 26.168 26.171 0 14.453-11.715 26.167-26.168 26.167s-26.171-11.714-26.171-26.167c0-14.454 11.718-26.171 26.171-26.171zm19.55-39.211c-.88 22.063-38.246 22.092-39.1-.007-3.778-37.804-13.443-127.553-13.135-163.074.311-10.946 9.383-17.426 20.989-19.898 3.578-.765 7.513-1.136 11.477-1.132 3.986.007 7.932.4 11.514 1.165 11.988 2.554 21.401 9.301 21.398 20.444l-.045 1.117-13.098 161.385z' />
              </svg>
            </div>
            <h2 className='arcm-mt-4 arcm-text-lg arcm-font-semibold arcm-text-gray-600'>
              {t('no_logs_found')}
            </h2>
            <p className='arcm-mt-2 arcm-text-sm arcm-text-gray-500'>
              {t('no_logs_desc')}
            </p>
          </div>
        </div>
      ) : (
        <div className='arcm-mt-[0]'>
          <div className='arcm-pl-[15px] arcm-pr-[15px]'>
            <div className='arcm-rounded-sm arcm-border arcm-border-stroke arcm-bg-white arcm-px-5 arcm-pb-2.5 arcm-pt-6 arcm-shadow-default arcm-dark:border-strokedark arcm-dark:bg-boxdark arcm-sm:px-7.5 arcm-xl:pb-1'>
              <div className='arcm-flex arcm-justify-between arcm-my-[15px]'>
                <h4 className='arcm-mb-0 arcm-text-xl arcm-font-bold arcm-text-black arcm-dark:text-white'>
                  {t('activity_logs')}
                </h4>
                {/*<Search handleSearch={handleSearch}/>*/}
              </div>
              <ActivityTable
                activities={logs}
                isLoading={logLoading}
                getLogs={getLogs}
                currentPage={currentPage}
              />
              <Pagination
                activities={logs}
                getLogs={getLogs}
                setCurrentPage={setCurrentPage}
                currentPage={currentPage}
              />
            </div>
          </div>
        </div>
      )}
    </>
  )
}

export default Logs