import Link from 'next/link'
import { toast } from 'react-toastify'
import { useRouter } from 'next/router'
import { FaEthereum } from 'react-icons/fa'
import Countdown from '@/components/Countdown'
import { buyTicket } from '@/services/blockchain'
import { useDispatch, useSelector } from 'react-redux'
import { globalActions } from '@/store/global_reducer'
import { createNewGroup, joinGroup } from '@/services/chat'

const DrawTime = ({ jackpot, luckyNumbers, participants }) => {
  const { setGeneratorModal, setAuthModal, setChatModal, setGroup } = globalActions
  const { wallet, currentUser, group } = useSelector((state) => state.globalState)
  const dispatch = useDispatch()
  const router = useRouter()
  const { jackpotId } = router.query
  const { CometChat } = window

  const handlePurchase = async (luckyNumberId) => {
    if (!wallet) return toast.warning('Connect your wallet')
    await toast.promise(
      new Promise(async (resolve, reject) => {
        await buyTicket(jackpotId, luckyNumberId, jackpot?.ticketPrice)
          .then(async () => {
            resolve()
          })
          .catch(() => reject())
      }),
      {
        pending: 'Approve transaction...',
        success: 'Ticket purchased successfully 👌',
        error: 'Encountered error 🤯',
      }
    )
  }

  const handleGroupCreation = async () => {
    if (!currentUser) return toast.warning('Please authenticate chat')
    await toast.promise(
      new Promise(async (resolve, reject) => {
        await createNewGroup(CometChat, `guid_${jackpot?.id}`, jackpot?.title)
          .then((group) => {
            dispatch(setGroup(JSON.parse(JSON.stringify(group))))
            resolve()
          })
          .catch(() => reject())
      }),
      {
        pending: 'Creating group...',
        success: 'Group created successfully 👌',
        error: 'Encountered error 🤯',
      }
    )
  }

  const handleGroupJoin = async () => {
    if (!currentUser) return toast.warning('Please authenticate chat')
    await toast.promise(
      new Promise(async (resolve, reject) => {
        await joinGroup(CometChat, `guid_${jackpot?.id}`)
          .then((group) => {
            dispatch(setGroup(JSON.parse(JSON.stringify(group))))
            resolve()
            window.location.reload()
          })
          .catch(() => reject())
      }),
      {
        pending: 'Joining group...',
        success: 'Group joined successfully 👌',
        error: 'Encountered error 🤯',
      }
    )
  }

  const onGenerate = () => {
    if (luckyNumbers.length > 0) return toast.warning('Already generated')
    dispatch(setGeneratorModal('scale-100'))
  }

  return (
    <div className="py-10 px-5 bg-slate-100">
      <div className="flex flex-col items-center justify-center text-center py-10">
        <h4 className="text-4xl text-slate-700 text-center font-bold pb-3">
          Buy Lottery Tickets Online
        </h4>
        <p className="text-lg text-gray-600 font-semibold capitalize">{jackpot?.title}</p>
        <p className="text-sm text-gray-500 w-full sm:w-2/3">{jackpot?.description}</p>
        <p className="text-sm font-medium text-black w-full sm:w-2/3">
          {jackpot?.participants} participants
        </p>
      </div>

      <div className="flex flex-col justify-center items-center space-y-4 mb-6">
        {jackpot?.expiresAt ? <Countdown timestamp={jackpot?.expiresAt} /> : null}

        <div className="flex justify-center items-center space-x-2">
          {wallet?.toLowerCase() == jackpot?.owner ? (
            <>
              <button
                disabled={jackpot?.expiresAt < Date.now()}
                onClick={onGenerate}
                className={`flex flex-nowrap border py-2 px-4 rounded-full bg-amber-500
                hover:bg-rose-600 font-semibold
                ${
                  jackpot?.expiresAt < Date.now()
                    ? 'opacity-50 cursor-not-allowed'
                    : 'hover:bg-rose-600'
                }
                `}
              >
                Generate Lucky Numbers
              </button>

              {!group ? (
                <button
                  onClick={handleGroupCreation}
                  className="flex flex-nowrap border py-2 px-4 rounded-full bg-gray-500
                hover:bg-rose-600 font-semibold text-white"
                >
                  Create Group
                </button>
              ) : null}
            </>
          ) : group && !group.hasJoined ? (
            <button
              onClick={handleGroupJoin}
              className="flex flex-nowrap border py-2 px-4 rounded-full bg-gray-500
                hover:bg-rose-600 font-semibold text-white"
            >
              Join Group
            </button>
          ) : null}

          <Link
            href={`/results/` + jackpot?.id}
            className="flex flex-nowrap border py-2 px-4 rounded-full bg-[#0c2856]
            hover:bg-[#1a396c] cursor-pointer font-semibold text-white"
          >
            Draw Result
          </Link>

          {!currentUser ? (
            <button
              onClick={() => dispatch(setAuthModal('scale-100'))}
              className="flex flex-nowrap border py-2 px-4 rounded-full bg-green-500
                hover:bg-amber-600 font-semibold"
            >
              Login Chat
            </button>
          ) : (
            <button
              onClick={() => dispatch(setChatModal('scale-100'))}
              className="flex flex-nowrap border py-2 px-4 rounded-full bg-green-500
            hover:bg-amber-600 font-semibold"
            >
              Enter Chat
            </button>
          )}
        </div>
      </div>

      <div className="bg-white text-sm overflow-x-auto flex flex-col w-full sm:w-3/4 mx-auto p-5 rounded-md">
        <div className="pb-4 text-center">
          <p className="semibold text-2xl">Select Your winning Lottery Numbers</p>
        </div>

        <table className="table-auto">
          <thead className="max-h-80 overflow-y-auto block">
            <tr className="flex justify-between text-left">
              <th className="px-4 py-2 ">#</th>
              <th className="px-4 py-2 ">Ticket Price</th>
              <th className="px-4 py-2 ">Draw Date</th>
              <th className="px-4 py-2 ">Ticket Number</th>
              <th className="px-4 py-2 ">Action</th>
            </tr>
          </thead>
          <tbody className="max-h-80 overflow-y-auto block">
            {luckyNumbers?.map((luckyNumber, i) => (
              <tr className="flex justify-between border-b text-left" key={i}>
                <td className="px-4 py-2 font-semibold">{i + 1}</td>
                <td className="px-4 py-2 font-semibold">
                  <div className="flex justify-center items-center space-x-1">
                    <FaEthereum />
                    <span>{jackpot?.ticketPrice}</span>
                  </div>
                </td>
                <td className="px-4 py-2 font-semibold">{jackpot?.drawsAt}</td>
                <td className="px-4 py-2 font-semibold">{luckyNumber}</td>
                <td className="px-4 py-2 font-semibold">
                  <button
                    disabled={participants.includes(luckyNumber)}
                    onClick={() => handlePurchase(i)}
                    className={`bg-black ${
                      participants.includes(luckyNumber)
                        ? 'opacity-50 cursor-not-allowed'
                        : 'hover:bg-rose-600'
                    } text-white text-sm py-2 px-4 rounded-full`}
                  >
                    BUY NOW
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export default DrawTime