import React from "react"
import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
import { Card, Drawer, List } from "antd"
import { useCallback, useState } from "react"

export const PlaygroundData = () => {
  // 模拟数据
  const data: {
    title: string
    description: string
    time: string
    metadata?: string
  }[] = [
    {
      title: "2019-2024年黄海清浅海域中河湖代数生物物种数据集",
      description:
        "数字对象标识: CSTR:13452.11.01.11.2021.242 国家海洋科学数据中心",
      time: "包括2019年8月，2021年8月和2024年6月",
      metadata: "热 榜 第"
    },
    {
      title: "祁连山老虎沟大本营10米气象每日值数据集（V1.0）（2018-2023）",
      description:
        "中国科学院西北生态环境资源研究院，2021年8月3日发布，2021年8月3日20:48更新",
      time: "包括2019年8月，2021年8月和2024年6月",
      metadata: "热 榜 第"
    },
    {
      title: "李嘉图为研究老虎沟大本营2014-2018年...",
      description:
        "中国科学院西北生态环境资源研究院，2021年8月3日发布，2021年8月3日20:48更新",
      time: "包括2019年8月，2021年8月和2024年6月",
      metadata: "热 榜 第"
    },
    {
      title: "青海玉树B1区俄日矿勘探数据2017-2023",
      description:
        "数字中国集团，CSTR:3260.11.1528414774204895456，DT2023年地质勘探补充调查",
      time: "包括2019年8月，2021年8月和2024年6月",
      metadata: "热 榜 第"
    }
  ]

  for (let i = 0; i < 10; i++) {
    data.push({
      title: "中国资源环境网",
      description: "中国资源环境网，2021年8月3日发布，2021年8月3日20:48更新",
      time: "包括2019年8月，2021年8月和2024年6月"
    })
  }

  const [open, setOpen] = useState(false)

  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }

  return (
    <div className="flex flex-col h-full overflow-y-hidden">
      {/* 数据导航 */}
      <DataNavigation
        Header={
          <div className="flex items-center text-[#1d4eD8] gap-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
              viewBox="0 0 32 32"
              width="20"
              height="20">
              <defs></defs>
              <g>
                <circle cx="22" cy="24" r="2" fill="rgb(29, 78, 216)"></circle>
                <path
                  fill="rgb(29, 78, 216)"
                  d="M29.777 23.479A8.64 8.64 0 0 0 22 18a8.64 8.64 0 0 0-7.777 5.479L14 24l.223.522A8.64 8.64 0 0 0 22 30a8.64 8.64 0 0 0 7.777-5.478L30 24zM22 28a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4M7 17h5v2H7zm0-5h12v2H7zm0-5h12v2H7z"></path>
                <path
                  fill="rgb(29, 78, 216)"
                  d="M22 2H4a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h8v-2H4V4h18v11h2V4a2.006 2.006 0 0 0-2-2"></path>
              </g>
            </svg>
            相关数据
          </div>
        }
        onClick={showDrawer}
      />

      {/* 数据列表 */}
      <div className="space-y-1.5 flex-1 overflow-y-auto">
        {data.slice(0, 3).map((item, index) => (
          <Card key={index} hoverable className="[&>*:first-child]:!p-3 h-[148px]">
            <div className="flex flex-col gap-0.5">
              <h3 className="text-sm font-medium text-gray-900 line-clamp-2">
                {item.title}
              </h3>
              <p className="text-xs text-gray-500 line-clamp-2">
                {item.description}
              </p>
              <p className="text-gray-700 truncate">{item.time}</p>
              {item.metadata && (
                <div className="text-green-500 text-xs px-2 py-1 rounded-full flex items-center gap-1">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
                    viewBox="0 0 24 24"
                    width="12"
                    height="12">
                    <defs></defs>
                    <g>
                      <path
                        fill="rgb(34, 197, 94)"
                        d="m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z"></path>
                    </g>
                  </svg>
                  {item.metadata}
                </div>
              )}
            </div>
          </Card>
        ))}
      </div>

      {/* 抽屉 */}
      <Drawer
        title="相关数据"
        closable={{ "aria-label": "Close Button" }}
        onClose={onClose}
        open={open}
        width={600}>
        <List
          itemLayout="vertical"
          dataSource={data}
          renderItem={(item, index) => (
            <List.Item>
              <List.Item.Meta
                title={
                  <h3 className="text-sm font-medium text-gray-900">
                    {item.title}
                  </h3>
                }
                description={
                  <div className="space-y-1">
                    <p className="text-xs text-gray-500">{item.description}</p>
                    <p className="text-gray-700">{item.time}</p>
                    {item.metadata && (
                      <div className="text-green-500 text-xs px-2 py-1 rounded-full flex items-center gap-1">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
                          viewBox="0 0 24 24"
                          width="12"
                          height="12">
                          <defs></defs>
                          <g>
                            <path
                              fill="rgb(34, 197, 94)"
                              d="m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z"></path>
                          </g>
                        </svg>
                        {item.metadata}
                      </div>
                    )}
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Drawer>
    </div>
  )
}
