"use client"

import { EditOutlined, WarningFilled } from "@ant-design/icons"
import { Button, Col, Flex, Row, Space, Image as AntImage, Badge } from "antd"
import { FC, Fragment, use, useEffect, useState } from "react"
import ChangeAudienceModal from "./change-audience"
import CommentApprovalModal from "./comment-approval"
import { Link, useRouter } from "@/i18n/routing"
import Image from "next/image"
import { useRecoilState } from "recoil"
import { modalFeedSelectState } from "@/recoil"
interface IProps {
  bgImageUrl: string
  categoryName: string
  updateUrl: string
  detailUrl: string
  type: "kuisine" | "book" | "market"
  id: string | number
  seen: number
  booked?: number
  visited?: number
  shared?: number
  clicked?: number
  commentApproval?: number
  onRefetch?: () => void
}
const FeedItem: FC<IProps> = (props) => {
  const { bgImageUrl, categoryName, updateUrl, detailUrl, type, id, seen, booked, visited, clicked, shared, commentApproval = 0, onRefetch } = props
  const { push } = useRouter()
  const [showChangeAudience, setShowChangeAudience] = useState<boolean>(false)
  const [showCommentModal, setShowCommentModal] = useState<boolean>(false)
  const handleToggleAudience = () => setShowChangeAudience((prev) => !prev)
  const handleToggleComment = () => setShowCommentModal((prev) => !prev)
  const handleGoToUpdate = () => push(updateUrl, { scroll: true })
  const [modalFeedSelect, setModalFeedSelect] = useRecoilState(modalFeedSelectState)

  useEffect(() => {
    if (modalFeedSelect && modalFeedSelect === id) {
      setShowCommentModal(true)
      setModalFeedSelect("")
    }
  }, [modalFeedSelect, id])

  return (
    <Fragment>
      <Link
        href={detailUrl}
        className="relative xl:w-[263px] xl:h-[256px] w-[230px] h-[220px] rounded-[10px] flex-none cursor-pointer">
        <Image
          src={`${bgImageUrl || "/img/default_image.jpg"}`}
          alt={`${bgImageUrl || "no-image"}`}
          fill
          onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
          className={`w-full h-full object-cover rounded-[10px] aspect-[3/4]`}
        />
        <Flex
          vertical
          justify="space-between"
          className="absolute w-full h-full left-0 top-0 rounded-[10px]">
          <div className="p-4 pb-0">
            <Flex
              vertical
              gap={4}>
              <Button
                onClick={(e) => {
                  e.preventDefault()
                  handleGoToUpdate()
                }}
                block={false}
                size="large"
                icon={<EditOutlined />}
              />
              <Button
                onClick={(e) => {
                  e.preventDefault()
                  handleToggleAudience()
                }}
                block={false}
                size="large"
                icon={
                  <AntImage
                    preview={false}
                    src="/img/icon/earth.svg"
                    width={24}
                    height={24}
                  />
                }
              />
              <Badge
                count={commentApproval || 0}
                size="small"
                overflowCount={9}
                offset={[-10, 10]}>
                <Button
                  onClick={(e) => {
                    e.preventDefault()
                    handleToggleComment()
                  }}
                  block={false}
                  size="large"
                  icon={<WarningFilled className="!text-red-70" />}
                />
              </Badge>
            </Flex>
          </div>

          <Flex
            vertical
            gap={4}
            className="px-4 pb-2 rounded-b-[10px]"
            style={{ background: "linear-gradient(180deg, rgba(255,255,255,0) 1%, rgba(0,0,0,1) 100%)" }}>
            <p className="font-bold text-white hover:underline">{categoryName}</p>

            <Row>
              <Col span={12}>
                <Space>
                  <AntImage
                    preview={false}
                    src="/img/icon/eye.svg"
                    width={24}
                    height={24}
                    alt="time"
                  />
                  <p className="text-white text-sm">{seen} seen</p>
                </Space>
              </Col>
              {clicked !== undefined ? (
                <Col span={12}>
                  <Space>
                    <AntImage
                      preview={false}
                      src="/img/icon/cursor_click.svg"
                      width={24}
                      height={24}
                      alt="time"
                    />
                    <p className="text-white text-sm">232 clicked</p>
                  </Space>
                </Col>
              ) : (
                <></>
              )}
              {shared !== undefined ? (
                <Col span={12}>
                  <Space>
                    <AntImage
                      preview={false}
                      src="/img/icon/share_arrow.svg"
                      width={24}
                      height={24}
                      alt="time"
                    />
                    <p className="text-white text-sm">232 shared</p>
                  </Space>
                </Col>
              ) : (
                <></>
              )}
              <Col span={12}>
                {booked !== undefined ? (
                  <Space>
                    <AntImage
                      preview={false}
                      src="/img/icon/check.svg"
                      width={24}
                      height={24}
                      alt="time"
                    />
                    <p className="text-white text-sm">{booked} booked</p>
                  </Space>
                ) : visited !== undefined ? (
                  <Space>
                    <AntImage
                      preview={false}
                      src="/img/icon/visited.svg"
                      width={24}
                      height={24}
                      alt="time"
                    />
                    <p className="text-white text-sm">{booked} booked</p>
                  </Space>
                ) : (
                  <></>
                )}
              </Col>
            </Row>
          </Flex>
        </Flex>
      </Link>

      <ChangeAudienceModal
        show={showChangeAudience}
        onClose={handleToggleAudience}
        {...props}
      />
      <CommentApprovalModal
        feedType={type}
        feedId={id}
        show={showCommentModal}
        onClose={handleToggleComment}
        onRefetch={onRefetch}
        {...props}
      />
    </Fragment>
  )
}
export default FeedItem