import MainLayout from "@/layout/main/mainLayout";
import styles from "./index.module.less";
import archivesAvatarPng from "@/assets/translate/archives-avatar.png";
import catDogPng from "@/assets/translate/cat-dog.png";
import archivesVarietyPng from "@/assets/translate/archives-variety.png";
import archivesWeightPng from "@/assets/translate/archives-weight.png";
import archivesDatePng from "@/assets/translate/archives-date.png";
import { useState } from "react";
import { Image, Button, Popup, Space } from "antd-mobile";
import { CloseOutline } from "antd-mobile-icons";
import { useSearchParams } from "react-router-dom";
import { Delete } from "@icon-park/react";

interface DefinedProps {
  visible: boolean;
  title: string;
  children: React.ReactNode;
  showBottom?: boolean;
  onClose: () => void;
}

function MyPopup(props: DefinedProps) {
  const { visible, title, children, onClose, showBottom = false } = props;
  return (
    <Popup
      visible={visible}
      closeOnMaskClick={true}
      className={styles.xpopup}
      onMaskClick={onClose}
    >
      <div className={styles.popupHeader}>
        <h3>{title}</h3>
        <span onClick={onClose}>
          <CloseOutline style={{ fontSize: "16px" }} />
        </span>
      </div>
      <div>{children}</div>

      {showBottom && (
        <div className={styles.popupBottom}>
          <div className={styles.popupButton}>
            <Button
              onClick={onClose}
              block
              size="large"
              shape="rounded"
              className={styles.cancelButton}
            >
              取 消
            </Button>
          </div>
          <div className={styles.popupButton}>
            <Button
              onClick={onClose}
              block
              size="large"
              shape="rounded"
              className={styles.confirmButton}
            >
              确 定
            </Button>
          </div>
        </div>
      )}
    </Popup>
  );
}

function Add() {
  const [visibleVariety, setVisibleVariety] = useState<boolean>(false);
  const [visibleWeight, setVisibleWeight] = useState<boolean>(false);
  const [visibleDate, setVisibleDate] = useState<boolean>(false);
  const [searchParams] = useSearchParams();
  const flag = searchParams.get("flag");

  const right = (
    <div style={{ fontSize: 16 }}>
      <Space style={{ "--gap": "16px" }}>
        <Delete fill="#FF4D4F" />
      </Space>
    </div>
  );

  return (
    <MainLayout
      navBarRight={flag === "edit" && right}
      isShowNavBar={true}
      title={flag === "add" ? "添加档案" : "编辑档案"}
    >
      <div className={styles.archives}>
        <div className={styles.archivesAvatar}>
          <Image src={archivesAvatarPng} width={80} height={80} />
        </div>
        <div className={styles.archivesInfo}>
          {flag === "add" && <Image src={catDogPng} />}

          <div className={styles.archivesFrom}>
            <div className={styles.archivesFromItem}>
              <div>昵称*</div>
              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
                {flag === "add" ? "请输入昵称" : "钱多多"}
              </div>
            </div>
            <div onClick={() => setVisibleVariety(true)} className={styles.archivesFromItem}>
              <div>品种*</div>
              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
                {flag === "add" ? "请选择" : "布偶猫"}
                {">"}
              </div>
            </div>
            <div onClick={() => setVisibleWeight(true)} className={styles.archivesFromItem}>
              <div>体重*</div>
              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
                {flag === "add" ? "请选择" : "45kg"}
                {">"}
              </div>
            </div>
            <div className={styles.archivesFromItem}>
              <div>性别*</div>
              <div className={styles.archivesFromInput}>
                <div className={styles.archivesTag}>未知</div>
                <div className={styles.archivesTag}>弟弟</div>
                <div className={`${styles.archivesTag} ${flag === "edit" && styles.active}`}>
                  妹妹
                </div>
              </div>
            </div>
            <div onClick={() => setVisibleDate(true)} className={styles.archivesFromItem}>
              <div>出生日期*</div>
              <div className={`${styles.archivesFromInput} ${flag === "edit" && styles.editInput}`}>
                {flag === "add" ? "请选择" : "2018-12-01"}
                {">"}
              </div>
            </div>
            <div className={styles.archivesFromItem}>
              <div>绝育情况*</div>
              <div className={styles.archivesFromInput}>
                <div className={styles.archivesTag}>未知</div>
                <div className={styles.archivesTag}>已绝育</div>
                <div className={`${styles.archivesTag} ${flag === "edit" && styles.active}`}>
                  未绝育
                </div>
              </div>
            </div>
            <div className={styles.archivesFromItem}>
              <Button block shape="rounded" className={styles.saveButton}>
                保存
              </Button>
            </div>
          </div>
        </div>
      </div>

      <MyPopup
        title="选择品种"
        visible={visibleVariety}
        onClose={() => {
          setVisibleVariety(false);
        }}
      >
        <Image src={archivesVarietyPng}></Image>
      </MyPopup>

      <MyPopup
        title="您宝贝的体重是？"
        visible={visibleWeight}
        onClose={() => {
          setVisibleWeight(false);
        }}
        showBottom={true}
      >
        <Image src={archivesWeightPng}></Image>
      </MyPopup>
      <MyPopup
        title="选择日期"
        visible={visibleDate}
        onClose={() => {
          setVisibleDate(false);
        }}
        showBottom={true}
      >
        <Image src={archivesDatePng}></Image>
      </MyPopup>
    </MainLayout>
  );
}

export default Add;