import Link from 'next/link'
import Identicon from 'react-identicons'
import { useSelector, useDispatch } from 'react-redux'
import { FaEthereum } from 'react-icons/fa'
import Countdown from '@/components/Countdown'
import { truncate } from '@/services/blockchain'
import { globalActions } from '@/store/global_reducer'

const Result = ({ jackpot, participants, result }) => {
  const { wallet } = useSelector((state) => state.globalState)
  const { setWinnerModal } = globalActions
  const dispatch = useDispatch()

  return (
    <div className="mx-auto py-16 bg-slate-100 space-y-2">
      <div className="flex flex-col items-center justify-center text-center py-10">
        <h1 className="text-2xl font-bold pb-4">Lottery Result</h1>
        <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 text-gray-500 w-full sm:w-2/3">
          Result for{' '}
          <span className="font-medium text-green-600">{result?.winners.length} winners</span> out
          of <span className="font-medium text-black">{jackpot?.participants} participants</span>{' '}
          <span className="font-medium text-gray-600">
            {result?.winners.length > 0 ? 'Drawn' : 'Not Drawn'}
          </span>
        </p>
      </div>

      <div className="flex flex-col justify-center items-center space-y-4">
        {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={() => dispatch(setWinnerModal('scale-100'))}
              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'
              }`}
            >
              Perform Draw
            </button>
          ) : null}

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

      <div className="flex flex-col-reverse sm:flex-row ">
        <div
          className="bg-white flex flex-col w-full sm:w-3/4 mx-auto
        p-5 rounded-md"
        >
          <h4 className="text-2xl font-bold text-slate-700 text-center">Winners & Lossers</h4>

          <div className="space-y-2 max-h-80 overflow-y-auto">
            {participants?.map((participant, i) => (
              <div
                key={i}
                className="flex justify-start items-center border-b border-gray-100 py-2 space-x-2"
              >
                <Identicon size={30} string={i} className="rounded-full h-12 w-12" />
                <div className="flex justify-center items-center space-x-2 text-sm">
                  <p className="font-semibold text-lg text-slate-500">
                    {truncate(participant.account, 4, 4, 11)}
                  </p>
                  <p className="text-slate-500">{participant.lotteryNumber}</p>
                  {result?.winners.includes(participant.lotteryNumber) ? (
                    <p className="text-green-500 flex justify-start items-center">
                      + <FaEthereum /> {result?.sharePerWinner} {' winner'}
                    </p>
                  ) : (
                    <p className="text-red-500 flex justify-start items-center">
                      - <FaEthereum /> {jackpot?.ticketPrice}
                    </p>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Result