import Identicon from 'react-identicons'
import { FaEthereum } from 'react-icons/fa'
import { useNavigate } from 'react-router-dom'
import { payoutProject } from '../Genesis'
import {
  daysRemaining,
  setGlobalState,
  truncate,
  useGlobalState,
} from '../store'

const ProjectDetails = ({ project }) => {
  const navigate = useNavigate()
  const [connectedAccount] = useGlobalState('connectedAccount')
  const [group] = useGlobalState('group')

  const handleChat = () => {
    if (group?.hasJoined) {
      navigate(`/chats/` + project.id)
    } else {
      setGlobalState('chatModal', 'scale-100')
    }
  }

  return (
    <div className="flex justify-center items-center flex-col">
      <div className="flex justify-start items-start sm:space-x-4 flex-wrap">
        <img
          className="rounded-xl h-64 object-cover sm:w-1/3 w-full"
          src={project.imageURL}
          alt={project.title}
        />
        <div className="flex-1 sm:py-0 py-4">
          <div className="flex flex-col justify-start flex-wrap">
            <h5 className="text-gray-900 text-sm font-medium mb-2">
              {project.title}
            </h5>
            <small className="text-gray-500">
              {new Date().getTime() > Number(project.expiresAt + '000')
                ? 'Expired'
                : daysRemaining(project.expiresAt)}{' '}
              left
            </small>
          </div>
          <div className="flex justify-start items-center space-x-2 mb-3">
            <Identicon
              className="rounded-full shadow-md"
              string={project.owner}
              size={15}
            />
            <div className="flex justify-between items-center w-full">
              <div className="flex justify-start items-center space-x-2">
                <small className="text-gray-700">
                  {truncate(project.owner, 4, 4, 11)}
                </small>
                <small className="text-gray-500 font-bold">
                  {project.backers} Backing{project.backer == 1 ? '' : 's'}
                </small>
              </div>

              <div>
                {project.status == 0 ? (
                  <small className="text-gray-500 font-bold">Open</small>
                ) : null}
                {project.status == 1 ? (
                  <small className="text-green-500 font-bold">Accepted</small>
                ) : null}
                {project.status == 2 ? (
                  <small className="text-gray-500 font-bold">Reverted</small>
                ) : null}
                {project.status == 3 ? (
                  <small className="text-red-500 font-bold">Deleted</small>
                ) : null}
                {project.status == 4 ? (
                  <small className="text-orange-500 font-bold">Paid</small>
                ) : null}
              </div>
            </div>
          </div>
          <p className="text-sm font-light">{project.description}</p>
          <div className="w-full bg-gray-300 rounded-full mt-4">
            <div
              className="bg-green-600 text-xs font-medium
              text-green-100 text-center p-0.5 leading-none
              rounded-l-full h-1 overflow-hidden max-w-full"
              style={{ width: `${(project.raised / project.cost) * 100}%` }}
            ></div>
          </div>
          <div className="flex justify-between items-center font-bold mt-2">
            <small className="text-green-700">
              {project.raised} ETH Raised
            </small>
            <small className="flex justify-start items-center">
              <FaEthereum />
              <span className="text-gray-700">{project.cost} EHT</span>
            </small>
          </div>

          <div className="flex justify-start flex-wrap items-center space-x-2 font-bold mt-4 w-full">
            {project.status == 0 ? (
              <button
                type="button"
                data-mdb-ripple="true"
                data-mdb-ripple-color="light"
                className="inline-block px-6 py-2.5 bg-green-600 text-white font-medium text-xs 
                  leading-tight uppercase rounded-full shadow-md hover:bg-green-700 hover:shadow-lg
                  focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0
                  active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out"
                onClick={() => setGlobalState('backModal', 'scale-100')}
              >
                Back This Project
              </button>
            ) : null}

            {connectedAccount.toLowerCase() == project.owner.toLowerCase() ? (
              project.status != 3 ? (
                project.status == 1 ? (
                  <button
                    type="button"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    className="inline-block px-6 py-2.5 bg-orange-600 text-white font-medium text-xs 
                    leading-tight uppercase rounded-full shadow-md hover:bg-orange-700 hover:shadow-lg
                    focus:bg-orange-700 focus:shadow-lg focus:outline-none focus:ring-0
                    active:bg-orange-800 active:shadow-lg transition duration-150 ease-in-out"
                    onClick={() => payoutProject(project.id)}
                  >
                    Payout
                  </button>
                ) : project.status != 4 ? (
                  <>
                    <button
                      type="button"
                      data-mdb-ripple="true"
                      data-mdb-ripple-color="light"
                      className="inline-block px-6 py-2.5 bg-gray-600 text-white font-medium text-xs 
                    leading-tight uppercase rounded-full shadow-md hover:bg-gray-700 hover:shadow-lg
                    focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0
                    active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out"
                      onClick={() => setGlobalState('updateModal', 'scale-100')}
                    >
                      Edit
                    </button>
                    <button
                      type="button"
                      data-mdb-ripple="true"
                      data-mdb-ripple-color="light"
                      className="inline-block px-6 py-2.5 bg-red-600 text-white font-medium text-xs 
                    leading-tight uppercase rounded-full shadow-md hover:bg-red-700 hover:shadow-lg
                    focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0
                    active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out"
                      onClick={() => setGlobalState('deleteModal', 'scale-100')}
                    >
                      Delete
                    </button>
                  </>
                ) : (
                  <button
                    type="button"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    className="inline-block px-6 py-2.5 bg-gray-600 text-white font-medium text-xs 
                  leading-tight uppercase rounded-full shadow-md hover:bg-gray-700 hover:shadow-lg
                  focus:bg-gray-700 focus:shadow-lg focus:outline-none focus:ring-0
                  active:bg-gray-800 active:shadow-lg transition duration-150 ease-in-out"
                  >
                    project Closed
                  </button>
                )
              ) : null
            ) : null}

            <button
              type="button"
              data-mdb-ripple="true"
              data-mdb-ripple-color="light"
              className="inline-block px-6 py-2.5 bg-orange-600 text-white font-medium text-xs 
                leading-tight uppercase rounded-full shadow-md hover:bg-orange-700 hover:shadow-lg
                focus:bg-orange-700 focus:shadow-lg focus:outline-none focus:ring-0
                active:bg-orange-800 active:shadow-lg transition duration-150 ease-in-out"
              onClick={handleChat}
            >
              Chat
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ProjectDetails