import React, { useContext, useMemo } from "react"
import { HistoryContext } from "@/components/Layouts/Layout.tsx"
import { PanelLeftIcon } from "lucide-react"
import { Button, Tooltip } from "antd"
import { PlusOutlined } from "@ant-design/icons"
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
import { useTranslation } from "react-i18next"
import { NavLink, useLocation } from "react-router-dom"
import logo from "@/assets/logo.png"

interface SettingIconProps {}
const SettingIcon: React.FC<SettingIconProps> = () => {
  return (
    <svg
      // @ts-ignore
      t="1755767517454"
      className="icon"
      viewBox="0 0 1084 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="10420"
      width="20"
      height="20">
      <path
        d="M1072.147851 406.226367c-6.331285-33.456782-26.762037-55.073399-52.047135-55.073399-0.323417 0-0.651455 0.003081-0.830105 0.009241l-4.655674 0c-73.124722 0-132.618162-59.491899-132.618162-132.618162 0-23.731152 11.447443-50.336101 11.546009-50.565574 13.104573-29.498767 3.023185-65.672257-23.427755-84.127081l-1.601687-1.127342-134.400039-74.661726-1.700252-0.745401c-8.753836-3.805547-18.334698-5.735272-28.479231-5.735272-20.789593 0-41.235746 8.344174-54.683758 22.306575-14.741683 15.216028-65.622973 58.649474-104.721083 58.649474-39.450789 0-90.633935-44.286652-105.438762-59.784516-13.518857-14.247316-34.128258-22.753199-55.127302-22.753199-9.945862 0-19.354234 1.861961-27.958682 5.531982l-1.746455 0.74078-139.141957 76.431283-1.643269 1.139662c-26.537186 18.437884-36.675557 54.579032-23.584845 84.062398 0.115506 0.264895 11.579891 26.725075 11.579891 50.634877 0 73.126262-59.491899 132.618162-132.618162 132.618162l-4.581749 0c-0.318797-0.00616-0.636055-0.01078-0.951772-0.01078-25.260456 0-45.672728 21.618157-52.002472 55.0811-0.462025 2.453354-11.313456 60.622322-11.313456 106.117939 0 45.494078 10.85143 103.659965 11.314996 106.119479 6.334365 33.458322 26.758957 55.076479 52.036353 55.076479 0.320337 0 0.651455-0.00616 0.842426-0.012321l4.655674 0c73.126262 0 132.618162 59.491899 132.618162 132.616622 0 23.760413-11.444363 50.333021-11.546009 50.565574-13.093793 29.474125-3.041666 65.646075 23.395414 84.151722l1.569346 1.093459 131.838879 73.726895 1.675611 0.7377c8.750757 3.84251 18.305437 5.790715 28.397607 5.790715 21.082208 0 41.676209-8.706094 55.0888-23.290689 18.724339-20.347588 69.527086-62.362616 107.04815-62.362616 40.625872 0 92.72537 47.100385 107.759669 63.583903 13.441852 14.831008 34.176001 23.689571 55.470741 23.695731l0.00616 0c9.895039 0 19.27877-1.883523 27.893999-5.598205l1.711034-0.73924 136.659342-75.531873 1.617088-1.128882c26.492523-18.456365 36.601633-54.600594 23.538642-84.016195-0.115506-0.267974-11.595291-27.082374-11.595291-50.67646 0-73.124722 59.49344-132.616622 132.618162-132.616622l4.517066-0.00154c0.300316 0.00616 0.599092 0.009241 0.899409 0.009241 25.331299-0.00154 45.785153-21.619697 52.107197-55.054918 0.112426-0.589852 11.325776-59.507301 11.325776-106.14104C1083.464388 466.640776 1072.609877 408.67356 1072.147851 406.226367zM377.486862 945.656142l-115.32764-64.487932c5.082277-13.052211 15.437801-43.51815 15.437801-75.017486 0-109.382917-84.176364-199.816642-192.587488-208.134635-2.647404-15.427021-8.873963-54.967133-8.873963-85.667166 0-30.65691 6.223479-70.232445 8.869343-85.671786 108.415744-8.311832 192.592108-98.745557 192.592108-208.134635 0-31.416171-10.300081-61.797405-15.371577-74.854236l122.721583-67.40331c0.003081 0 0.00462 0.00154 0.007701 0.00154 4.423121 4.518606 22.121764 22.080182 46.558275 39.493911 39.929754 28.46229 77.952885 42.894416 113.014434 42.894416 34.716571 0 72.437845-14.151831 112.115025-42.06431 24.282503-17.07953 41.896442-34.302288 46.308782-38.74543 0.009241-0.00154 0.018481-0.00462 0.026182-0.00616l118.301542 65.726159c-5.077657 13.055291-15.416239 43.499669-15.416239 74.958962 0 109.389077 84.174824 199.822802 192.590568 208.134635 2.645865 15.462442 8.872423 55.107281 8.872423 85.671786 0 30.687711-6.223479 70.241685-8.869343 85.673326C890.042174 606.334084 805.86427 696.767809 805.86427 806.158426c0 31.450053 10.317022 61.851309 15.393138 74.903519l-119.783103 66.198965c-5.168521-5.490399-22.603811-23.363073-46.740005-41.288109-40.701336-30.224145-79.662378-45.549521-115.800446-45.549521-35.79155 0-74.458435 15.038919-114.927219 44.694774C400.22004 922.554885 382.666163 940.255068 377.486862 945.656142zM731.271848 511.646647c0-105.803762-86.081448-191.88059-191.888289-191.88059-105.803762 0-191.88059 86.076827-191.88059 191.88059 0 105.803762 86.076827 191.882129 191.88059 191.882129C645.19194 703.528777 731.271848 617.450409 731.271848 511.646647zM539.383558 395.903184c63.825696 0 115.751164 51.922387 115.751164 115.743463 0 63.825696-51.925468 115.751164-115.751164 115.751164-63.821076 0-115.743463-51.925468-115.743463-115.751164C423.640095 447.824031 475.562482 395.903184 539.383558 395.903184z"
        fill="#272636"
        p-id="10421"></path>
    </svg>
  )
}

type Props = {
  setOpenModelSettings: (open: boolean) => void
}

export const Header: React.FC<Props> = ({ setOpenModelSettings }) => {
  const location = useLocation()

  const { show, setShow } = useContext(HistoryContext)

  const showLeft = useMemo<boolean>(() => {
    console.log(location.pathname)
    if (location.pathname.includes("/settings")) {
      return true
    }
    return show
  }, [location.pathname, show])

  const { t } = useTranslation(["option", "common", "settings"])

  const { clearChat } = useMessageOption()
  return (
    <div
      className={`h-[60px] absolute inset-0 pl-5 z-10 flex items-center transition-all duration-300 ease-in-out ${show && !location.pathname.includes("/settings") ? "left-[300px]" : ""}`}>
      {/*控制侧边栏显示隐藏与新建对话*/}
      {!showLeft && (
        <div className="flex items-center gap-3">
          <button
            className="text-gray-500 dark:text-gray-400"
            onClick={() => {
              setShow(!show)
            }}>
            <PanelLeftIcon className="w-6 h-6" />
          </button>
          <Button
            color="cyan"
            variant="filled"
            shape="round"
            style={{
              color: "#0057ff",
              background: "#0057ff0f",
              border: "1px solid #0066ff26"
            }}
            onClick={clearChat}>
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center">
                <PlusOutlined
                  className="text-sm"
                  style={{ fontSize: "16px", fontWeight: 500 }}
                />
                <span>{t("newChat")}</span>
              </div>
            </div>
          </Button>
        </div>
      )}
      {location.pathname.includes("/settings") && (
        <h2 className="text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3">
          <NavLink
            to="/"
            className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
            <span className="text-[#d30100]">数联网</span>科创智能体
          </NavLink>
        </h2>
      )}
      {/* 项目标题 */}
      <div
        className={`
       absolute left-1/2 transform -translate-x-1/2
       w-[600px] h-[60px] dark:bg-black
       flex items-center justify-center
       transition-[top] drop-shadow
       ${show ? "-top-[60px]" : "-top-[2px] delay-200"}
      `}>
        <svg
          // @ts-ignore
          t="1755653236428"
          className="icon"
          viewBox="0 0 8960 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9634"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="100%"
          height="55">
          <path
            d="M8960 0c-451.52 181.184-171.2 1024-992 1024H992C171.232 1024 451.392 181.184 0 0h8960z"
            fill="#ffffff"
            p-id="9635"></path>
        </svg>
        <h2 className="flex items-center gap-3 text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3 absolute left-1/2 transform -translate-x-1/2">
          <img src={logo} alt="logo" className="w-8" />
          <p><span className="text-[#d30100]">数联网</span>科创智能体</p>
        </h2>
      </div>
      {/*设置框*/}
      <div className="flex items-center ml-auto pr-5">
        <Tooltip title={t("settings")}>
          <NavLink
            to="/settings"
            className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
            <SettingIcon />
          </NavLink>
        </Tooltip>
      </div>
    </div>
  )
}