import { Button, Col, Flex, Image as AntImage, Modal, Row, Space } from "antd"
import Image from "next/image"
import { FC, useMemo, useState } from "react"
interface IProps {
  show: boolean
  onClose: () => void
  bgImageUrl: string
  categoryName: string
  seen: number
  booked?: number
  visited?: number
  shared?: number
  clicked?: number
}
const ChangeAudienceModal: FC<IProps> = (props) => {
  const { bgImageUrl, categoryName, show, onClose, seen, booked, clicked, shared, visited } = props
  const [activeValue, setActiveValue] = useState<string>("public")
  const DATA: Array<{ value: string; label: string; iconPath: string }> = [
    {
      value: "public",
      label: "Public",
      iconPath: "/img/icon/earth.svg",
    },
    { value: "friends", label: "Friends", iconPath: "/img/icon/people-outline.svg" },
    { value: "only_me", label: "Only Me", iconPath: "/img/icon/person-outline.svg" },
  ]
  return (
    <Modal
      open={show}
      onCancel={onClose}
      title="Post Audience"
      classNames={{
        footer: "!pt-4",
      }}
      width={606}
      footer={
        <Flex
          align="center"
          justify="flex-end"
          gap={16}>
          <Button
            size="large"
            type="primary"
            className="!bg-gray-900"
            onClick={onClose}>
            Apply
          </Button>
          <Button
            size="large"
            variant="outlined"
            onClick={onClose}>
            Cancel
          </Button>
        </Flex>
      }
      centered>
      <Row gutter={[16, 16]}>
        <Col
          xs={24}
          xl={12}>
          <div className="relative w-[263px] h-[256px] rounded-[10px] flex-none">
            <Image
              src={bgImageUrl}
              fill
              alt="bg-image"
              className=" object-cover rounded-[10px]"
            />
            <Flex
              vertical
              justify="space-between"
              className="absolute w-full h-full left-0 top-0 rounded-[10px]">
              <div></div>
              <Flex
                vertical
                gap={4}
                className="px-4 pb-2 rounded-b-[10px]"
                style={{ background: "linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(0,0,0,1) 100%)" }}>
                <p className="font-bold text-white">{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>
          </div>
        </Col>
        <Col
          xs={24}
          xl={12}>
          <Flex
            vertical
            gap={24}>
            <p className="font-semibold">Post Audience Setting</p>
            <Flex
              vertical
              gap={16}>
              {DATA.map((item, index) => {
                const isActive = item.value === activeValue
                return (
                  <Flex
                    onClick={() => setActiveValue(item.value)}
                    align="center"
                    gap={17}
                    className="rounded-md border border-gray-200 h-[60px] px-4 cursor-pointer"
                    key={index}>
                    <Image
                      src={isActive ? "/img/icon/checked.svg" : "/img/icon/unchecked.svg"}
                      width={24}
                      height={24}
                      alt="check"
                    />
                    <Flex
                      align="center"
                      gap={10}>
                      <Image
                        src={item.iconPath}
                        width={24}
                        height={24}
                        alt="icon"
                      />
                      {item.label}
                    </Flex>
                  </Flex>
                )
              })}
            </Flex>
          </Flex>
        </Col>
      </Row>
    </Modal>
  )
}
export default ChangeAudienceModal