import { useState } from "react"
import { NavLink } from "react-router-dom"
import { useTranslation } from "react-i18next"
import { Button } from "../../ui-component/button/button.component"
import { Card } from "../../ui-component/card/card.component"
import { Footer } from "../../ui-component/footer/footer.component"
import { Header } from "../../ui-component/header/header.component"
import { Icon } from "../../ui-component/icon/icon.component"
import { Input } from "../../ui-component/input/input.component"
import { Menu, MenuItem } from "../../ui-component/menu"
import { useModal } from "../../ui-component/modal"
import { PopupOpener } from "../../ui-component/popup/popup-opener.provider"
import { Build } from "../build/build.component"
import { Feedback } from "../feedback/feedback.component"
import styles from "./home-page.module.css"
import buildTeam from "../../../public/images/build-team.png"
import diagram from "../../../public/images/diagramma-split.png"
import SubmitProjectImg from "../../assets/SubmitProjectImg.png"
import advantages1 from "../../assets/advantages1.png"
import advantages2 from "../../assets/advantages2.png"
import advantages3 from "../../assets/advantages3.png"

export const cardData = [
  {
    id: 1,
    projectName: "Project One",
    description:
      "Lorem ipsum dolor sit amet consectetur. Magna imperdiet dictum lectus orci mattis elit quis ut mattis. Leo aenean cursus augue potenti lorem risus in.",
    imgSrc:
      "https://codewithsadee.github.io/anon-ecommerce-website/assets/images/blog-4.jpg",
    timeRemaining: "1d, 4h:35m",
    isTop: true,
    sections: [
      {
        title: "Hiring is open",
        types: ["Medicine", "Construction"],
      },
      {
        title: "Return",
        types: [
          "Salary",
          "Interest",
          "Interest",
          "Interest",
          "Interest",
          "Interest",
        ],
      },
    ],
  },
  {
    id: 2,
    projectName: "Project Two",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
    imgSrc:
      "https://codewithsadee.github.io/anon-ecommerce-website/assets/images/blog-4.jpg",
    timeRemaining: "2d, 3h:20m",
    isTop: false,
    sections: [
      {
        title: "Hiring is open",
        types: ["Tech", "Education"],
      },
      {
        title: "Return",
        types: ["Profit", "Equity"],
      },
    ],
  },
  {
    id: 2,
    projectName: "Project Two",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
    imgSrc:
      "https://codewithsadee.github.io/anon-ecommerce-website/assets/images/blog-4.jpg",
    timeRemaining: "2d, 3h:20m",
    isTop: false,
    sections: [
      {
        title: "Hiring is open",
        types: ["Tech", "Education"],
      },
      {
        title: "Return",
        types: ["Profit", "Equity"],
      },
    ],
  },
  {
    id: 2,
    projectName: "Project Two",
    description:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
    imgSrc:
      "https://codewithsadee.github.io/anon-ecommerce-website/assets/images/blog-4.jpg",
    timeRemaining: "2d, 3h:20m",
    isTop: false,
    sections: [
      {
        title: "Hiring is open",
        types: ["Tech", "Education"],
      },
      {
        title: "Return",
        types: ["Profit", "Equity"],
      },
    ],
  },
]

export function HomePage() {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const modal = useModal()
  const { t } = useTranslation()
  const [paymentMethod, setPaymentMethod] = useState<string | null>(null)
  const [isOpen, setOpen] = useState(false)
  const [isOpenTool, setOpenTool] = useState(false)

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function handleMenuClick(option: string) {
    setPaymentMethod(option)
  }

  function openPaymentMenu() {
    return (
      <Menu>
        <MenuItem label="Salary" onClick={() => handleMenuClick("salary")} />
        <MenuItem
          label="Stock Options"
          onClick={() => handleMenuClick("stock")}
        />

        <MenuItem
          label="Volunteer"
          onClick={() => handleMenuClick("volunteer")}
        />
        <MenuItem
          label="% After Project"
          onClick={() => handleMenuClick("after")}
        />
      </Menu>
    )
  }

  function openFeedback() {
    return (
      <Menu>
        <MenuItem
          label="Feedback"
          onClick={() => {
            modal.open({
              component: <Feedback />,
              width: "93rem",
              modalClassName: styles.modal,
              hideCloseBtn: true,
              closeOnOutsideClick: true,
              closeOnEsc: true,
            })
          }}
        />
      </Menu>
    )
  }

  // ---------------------------------------------------------------------------
  return (
    <>
      {/* --------------------------------------------------------------------------- */}
      {/* HEADER  */}
      {/* --------------------------------------------------------------------------- */}

      <Header />

      <div className={styles.main}>
        {/* --------------------------------------------------------------------------- */}
        {/* BUILD */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.content}>
          <div className={styles.contentWrap}>
            <Build />
          </div>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* INPUTS */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.inputWrap}>
          <Input
            mode="primary"
            className={styles.paymentPopup}
            style={{ width: "100%" }}
            placeholder="Search projects"
            iconClassName={styles.iconSearch}
            value={""}
            icon="fa-light fa-search"
            onValueChange={() => {}}
          />
          <PopupOpener
            className={styles.paymentPopup}
            mode="click"
            placement="bottom-start"
            closeOnInteract={true}
            onOpen={() => setOpen(true)}
            onClose={() => setOpen(false)}
            content={openPaymentMenu()}
          >
            <div className={styles.paymentWrap}>
              <div className={styles.paymentTextWrap}>
                <Icon name="fal fa-dollar-sign" style={{ color: "#5807C9" }} />
                <span className={styles.paymentText}>
                  {paymentMethod === "salary" ? (
                    "Salary"
                  ) : paymentMethod === "stock" ? (
                    "Stock Options"
                  ) : paymentMethod === "volunteer" ? (
                    "Volunteer"
                  ) : paymentMethod === "after" ? (
                    "% After Project"
                  ) : (
                    <span className={styles.selectPayment}>Select payment</span>
                  )}
                </span>
              </div>
              <Icon
                name={isOpen ? "fal fa-chevron-down" : "fal fa-chevron-right"}
                style={{ color: "#5807C9", paddingRight: "1rem" }}
              />
            </div>
          </PopupOpener>
          <PopupOpener
            mode="click"
            className={styles.paymentPopup}
            placement="bottom-start"
            closeOnInteract={true}
            onOpen={() => setOpenTool(true)}
            onClose={() => setOpenTool(false)}
            content={openFeedback()}
          >
            <div className={styles.devToolWrap}>
              <div className={styles.paymentTextWrap}>
                <Icon name="fal fa-dollar-sign" style={{ color: "#5807C9" }} />
                <span className={styles.paymentText}>
                  <span className={styles.selectPayment}>
                    Development Tools
                  </span>
                </span>
              </div>
              <Icon
                name={
                  isOpenTool ? "fal fa-chevron-down" : "fal fa-chevron-right"
                }
                style={{ color: "#5807C9", paddingRight: "1rem" }}
              />
            </div>
          </PopupOpener>
          <NavLink to={"/project-list"} className={styles.btnSearchWrap}>
            <Button className={styles.btnSearch}>Search</Button>
          </NavLink>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* ADVANTAGES */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.advantagesBlock}>
          <h1 className={styles.advantagesTitle}>{t("lorem-ip")}</h1>
          <div className={styles.advantagesImgBlock}>
            <div className={styles.advantagesImgItems}>
              <img src={advantages1} alt="advantages1" />
              <h1 className={styles.paragraph}>{t("profit")}</h1>
            </div>
            <div className={styles.advantagesImgItems}>
              <img src={advantages2} alt="advantages2" />
              <h1 className={styles.paragraph}>{t("always-help")}</h1>
            </div>
            <div className={styles.advantagesImgItems}>
              <img src={advantages3} alt="advantages2" />
              <h1 className={styles.paragraph}>{t("future")}</h1>
            </div>
          </div>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* CHART */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.chartBlock}>
          <div className={styles.chartBlockWrap}>
            <h1 className={styles.chartTitle}>{t("lorem-ip")}</h1>
            <p className={styles.chartDescription}>{t("chart-title")}</p>
          </div>
          <div className={styles.chart}>
            <img src={diagram} className={styles.diagramImg} />
          </div>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* ADVANTAGES */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.advantagesBlock}>
          <h1 className={styles.advantagesTitle}>{t("lorem-ip")}</h1>
          <div className={styles.advantagesImgBlock}>
            <div className={styles.advantagesImgItems}>
              <img src={advantages1} alt="advantages1" />
              <h1 className={styles.paragraph}>{t("profit")}</h1>
            </div>
            <div className={styles.advantagesImgItems}>
              <img src={advantages2} alt="advantages2" />
              <h1 className={styles.paragraph}>{t("always-help")}</h1>
            </div>
            <div className={styles.advantagesImgItems}>
              <img src={advantages3} alt="advantages2" />
              <h1 className={styles.paragraph}>{t("future")}</h1>
            </div>
          </div>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* CREATE A TEAM */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.container}>
          <h1 className={styles.createTeamTitle}>{t("create-team")}</h1>
          <div className={styles.steps}>
            <div className={styles.contentTeam}>
              <div className={styles.step}>
                <div className={styles.stepNumber}>
                  01.
                  <span className={styles.stepSection}>
                    {t("choose-product")}
                  </span>
                </div>
                <div className={styles.stepText}>
                  Web app, Mobile app, Data science, Gen AI, MVP (Prototype),
                  Website, Technology migration, System architecture,
                  Documents/Consulting
                </div>
              </div>
              <div className={styles.step}>
                <div className={styles.stepNumber}>
                  02.{" "}
                  <span className={styles.stepSection}>
                    {t("choose-tools")}
                  </span>
                </div>
                <div className={styles.stepText}>
                  Python, Java, JavaScript, TypeScript, Node.js, React, AWS,
                  Azure, Fullstack
                </div>
              </div>
              <div className={styles.step}>
                <div className={styles.stepNumber}>
                  03.
                  <span className={styles.stepSection}>{t("specialists")}</span>
                </div>
                <div className={styles.stepText}>{t("from-to")}</div>
              </div>
              <div className={styles.step}>
                <div className={styles.stepNumber}>
                  04.
                  <span className={styles.stepSection}>
                    {t("payment-method")}
                  </span>
                </div>
                <div className={styles.stepText}>{t("salary-title")}</div>
              </div>
              <div className={styles.step}>
                <div className={styles.stepNumber}>
                  05. <span className={styles.stepSection}>{t("result")}</span>
                </div>
                <div className={styles.stepText}>{t("result-title")}</div>
              </div>
            </div>
            <div className={styles.imageContainer}>
              <p className={styles.imageText}>How to create a team</p>
              <img
                className={styles.image}
                src={buildTeam}
                alt="Teamwork Image"
              />
            </div>
          </div>
          <div className={styles.action}>
            <Button className={styles.createBtn}>
              {t("button.create-team")}
            </Button>
          </div>
        </div>
      </div>

      {/* --------------------------------------------------------------------------- */}
      {/* PROJECT SUBMIT */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.projectSubmitBlock}>
        <h1 className={styles.projectSubmitTitle}>How to submit a project</h1>
        <div className={styles.reversBlock}>
          <div className={styles.projectSubmitCardBlock}>
            <div className={styles.projectSubmitCard}>
              <span className={styles.projectSubmitCount}>01.</span>
              Click on the button «Submit a project».
            </div>
            <div className={styles.projectSubmitCard}>
              <span className={styles.projectSubmitCount}>01.</span>
              Fill out the product questionnaire.
            </div>
            <div className={styles.projectSubmitCard}>
              <span className={styles.projectSubmitCount}>01.</span>
              Click on the button «Submit a project».
            </div>
            <div className={styles.projectSubmitCard}>
              <span className={styles.projectSubmitCount}>01.</span>
              The project will be moderated and published
            </div>
          </div>
          <div className={styles.projectSubmitImgBlock}>
            <img
              className={styles.SubmitProjectImg}
              src={SubmitProjectImg}
              alt="SubmitProjectImg"
            />
          </div>
        </div>
        <Button className={styles.projectSubmitBtn}>
          <NavLink to={"/project-request"}>
            {t("button.submit-project")}
          </NavLink>
        </Button>
      </div>

      {/* --------------------------------------------------------------------------- */}
      {/* CARD */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.projectsTitleBlock}>
        <h1 className={styles.projectLabel}>{t("navbar.projects")}</h1>
        <span className={styles.icon}>
          {t("sea-all")}
          <Icon
            name="far fa-chevron-right"
            size="1.6"
            clickable
            style={{
              color: "#5807C9",
              marginLeft: "1.2rem",
              marginBottom: "0.3rem",
            }}
          />
        </span>
      </div>
      <div className={styles.cardBlock}>
        <Card key={cardData.length} cardData={cardData} showSection={false} />
      </div>

      {/* --------------------------------------------------------------------------- */}
      {/* FOOTER */}
      {/* --------------------------------------------------------------------------- */}

      <Footer />
    </>
  )
}
I'll ask you in next