'use client';

import {PropsWithChildren, memo, useEffect, useState} from 'react';
import {createStyles} from "antd-style";
import {Anchor, Button, Card, Image} from "antd";
import {RightCircleOutlined, LikeFilled, WechatFilled, HomeFilled, DribbbleSquareFilled, CopyFilled, MedicineBoxFilled, IeCircleFilled, IdcardFilled, HourglassFilled, InsuranceFilled} from "@ant-design/icons";
// import Link from "next/link";
import request from '@/app/request';
import Title from "../discover/components/Title";

const stList = [
  {
    date: '2024-02-03',
    des: "擅长产品功能分析与用户价值观广告文案创作。",
    id: '1',
    title: 'XXX助手',
  },
]

const useStyles = createStyles(({css}) => ({
  actionItem: css`
    height: 56px;
    line-height: 56px;
    margin-right: 30px
  `,
  actionItemIcon: css`
    margin-right: 15px;
    margin-left: 28px;
  `,
  actionSpan: css`
    color: #2E62FF;
  `,
  avImg: css`
    width: 55px;
    height: 55px;
    border-radius: 16px
  `,
  btn: css`
    width: 136px;
    padding: 0px 2px;
    margin-left: 30px;
    border-radius: 41px;
    border-color: #C2C2C2 !important;
    color: #666 !important;
  `,
  card: css`
    width: 23%;
    margin: 32px 1% 0;
    display: inline-block;
  `,
  cardCotain: css`
   margin-top: -10px;
   font-size: 12px;
   color: #999
  `,
  cardMeta: css`
    height: 80px
  `,
  container: css`
   marginTop: -20px
  `,
  containerTitle: css`
   font-size: 18px
  `,
  desImg: css`
    width: 28px
  `,
  desText: css`
    font-size: 12px;
    color: #909090;
  `,
  egiht: css`
    color: #5BD941
  `,
  fif: css`
    color: #FF4D4D
  `,
  first: css`
    color: #FFAD01
  `,
  four: css`
    color: #FF9B06
  `,
  leftTitle: css`
    font-size: 20px;
    margin: 0 1%;
    padding-top: 20px;
  `,
  nine: css`
    color: #07D7F7
  `,
  rightCo: css`
    font-size: 16px;
    margin-left: 30px;
    vertical-align: middle;
  `,
  sec: css`
    color: #5BD941
  `,
  seleEight: css`
    background-color: #D1FFE7;
    color: #5BD941;
  `,
  seleFif: css`
    background-color: #FFEBEB;
    color: #FF4D4D;
  `,
  seleFir: css`
    background-color: #FFF3D9;
    color: #FFAD01;
  `,
  seleFou: css`
    background-color: #FFFACD;
    color: #FF9B06;
  `,
  seleNine: css`
    background-color: #D1FFE7;
    color: #07D7F7;
  `,
  seleSec: css`
    background-color: #DCF9D6;
    color: #5BD941;
  `,
  seleSeve: css`
    background-color: #D8FAFF;
    color: #0EDFFF;
  `,
  seleSix: css`
    background-color: #E3E9FF;
    color: #003BFF;
  `,
  seleTen: css`
    background-color: #FCEBFF;
    color: #E138FF;
  `,
  seleThd: css`
    background-color: #E3E9FF;
    color: #003BFF;
  `,
  selectBtn: css`
    background-color: #3B6FFF !important;
    color: #fff !important;
  `,
  seven: css`
    color: #0EDFFF
  `,
  six: css`
    color: #003BFF
  `,
  ten: css`
    color: #E138FF
  `,
  thd: css`
    color: #003BFF
  `,
  title: css`
    font-size: 18px
  `,
  topBtn: css`
    padding: 10px 0px;
    background: rgba(239, 243, 255, 0.22);
    box-sizing: border-box;
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: rgba(146, 154, 178, 0.2392);
  `,
  verImg: css`
    height: 2px;
    width: 80%;
    background-color: #DFE4FF;
    display: inline-block
  `,
  zsds: css`
    display: inline-block;
    margin: 5px
  `,
  zsdsCardImg: css`
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-left: 5px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid #ddd;
    display: inline-block
  `,
}))

const getContainer = () => document.querySelector("#fileRight")
const handleClickCard = (e) => {
  window.open(e.website, '_blank');
}

const onClickAncho = (e) => {
  e.preventDefault()
  // let srcolls = document.querySelector(link.href)
  // srcolls.scrollIntoView({
  //   behavior: 'smooth',
  //   block: 'start'
  // })
}
const ApplicationSet = memo<PropsWithChildren>(( ) => {
  const { styles, cx } = useStyles()
  const [val, setVal] = useState("AI")
  const [achVal, setAchVal] = useState("#rmtj")
  const [stData, setStData] = useState("")
  useEffect(() => {
    const fetchData = () => {
        request({
            method: "get",
            url: "/flxai/api/robot/apptoolsset/getAllAiTools",
        }).then((response) => {
          if (response.code === 0) {
            // console.log(response,"2222")
            setStData(response.data);
          }
        }).catch(error => {
          console.error('Error fetching data:', error);
        })
    };
    fetchData();
  }, []); // 空数组[]意味着仅在组件挂载时调用一次

  const handleClick = (e) => {
    setVal(e)
  }

  const onChangeAnchor = (e) => {
    setAchVal(e)
  }

  return (
    <>
      <div className={cx(styles.topBtn)}>
        <Button className={cx(styles.btn, val==='AI'&&styles.selectBtn)} onClick={() => handleClick("AI")}>AI应用集</Button>
        <Button className={cx(styles.btn, val==='tj'&&styles.selectBtn)} onClick={() => handleClick("tj")}>推荐工具</Button>
      </div>
      <div style={{ display: 'flex', overflowY: 'scroll' }}>
        {val === 'AI' ?
          <>
          <Anchor
            affix={false}
            getContainer={getContainer}
            items={[
              {
                href: '#rmtj',
                key: '1',
                title: <div className={cx(styles.actionItem, achVal === '#rmtj' && styles.seleFir)}><LikeFilled
                  className={cx(styles.actionItemIcon, styles.first)}/>热门推荐</div>,
              },
              {
                href: '#ailt',
                key: '2',
                title: <div className={cx(styles.actionItem, achVal === '#ailt' && styles.seleSec)}><WechatFilled
                  className={cx(styles.actionItemIcon, styles.sec)}/>AI聊天</div>,
              },
              {
                href: '#aixz',
                key: '3',
                title: <div className={cx(styles.actionItem, achVal === '#aixz' && styles.seleThd)}><CopyFilled
                  className={cx(styles.actionItemIcon, styles.thd)}/>AI写作</div>,
              },
              {
                href: '#aihh',
                key: '4',
                title: <div className={cx(styles.actionItem, achVal === '#aihh' && styles.seleFou)}>
                  <DribbbleSquareFilled className={cx(styles.actionItemIcon, styles.four)}/>AI绘画</div>,
              },
              {
                href: '#aisp',
                key: '5',
                title: <div className={cx(styles.actionItem, achVal === '#aisp' && styles.seleFif)}><HomeFilled
                  className={cx(styles.actionItemIcon, styles.fif)}/>AI视频</div>,
              },
              {
                href: '#aibg',
                key: '6',
                title: <div className={cx(styles.actionItem, achVal === '#aibg' && styles.seleSix)}><HourglassFilled
                  className={cx(styles.actionItemIcon, styles.six)}/>AI办公</div>,
              },
              {
                href: '#aiszr',
                key: '7',
                title: <div className={cx(styles.actionItem, achVal === '#aiszr' && styles.seleSeve)}><IdcardFilled
                  className={cx(styles.actionItemIcon, styles.seven)}/>AI数字人</div>,
              },
              {
                href: '#aijy',
                key: '8',
                title: <div className={cx(styles.actionItem, achVal === '#aijy' && styles.seleEight)}><IeCircleFilled
                  className={cx(styles.actionItemIcon, styles.egiht)}/>AI教育</div>,
              },
              {
                href: '#aibc',
                key: '9',
                title: <div className={cx(styles.actionItem, achVal === '#aibc' && styles.seleNine)}><InsuranceFilled
                  className={cx(styles.actionItemIcon, styles.nine)}/>AI编程</div>,
              },
              {
                href: '#aiyp',
                key: '10',
                title: <div className={cx(styles.actionItem, achVal === '#aiyp' && styles.seleTen)}><MedicineBoxFilled
                  className={cx(styles.actionItemIcon, styles.ten)}/>AI音频</div>,
              },
            ]}
            onChange={(e) => onChangeAnchor(e)}
            onClick={onClickAncho}
            style={{ background: "#fff", width: '200px' }}
          />

          <div id="fileRight" style={{height: "100vh", overflowY: 'scroll', width: "calc(100vw - 300px)"}}>
            <div id="rmtj">
              <div className={cx(styles.leftTitle)}>热门推荐</div>
              <div>
                {
                  stData['rmtj'] && stData['rmtj'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="ailt">
              <div className={cx(styles.leftTitle)}>AI聊天</div>
              <div>
                {
                  stData['chat'] && stData['chat'].map((e) => {
                    return (
                      <Card
                        actions={[<span  className={styles.actions} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aixz">
              <div className={cx(styles.leftTitle)}>AI写作</div>
              <div>
                {
                  stData['writing'] && stData['writing'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aihh">
              <div className={cx(styles.leftTitle)}>AI绘画</div>
              <div>
                {
                  stData['conversation'] && stData['conversation'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aisp">
              <div className={cx(styles.leftTitle)}>AI视频</div>
              <div>
                {
                  stData['video'] && stData['video'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aibg">
              <div className={cx(styles.leftTitle)}>AI办公</div>
              <div>
                {
                  stData['office'] && stData['office'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aiszr">
              <div className={cx(styles.leftTitle)}>AI数字人</div>
              <div>
                {
                  stData['digitalPeople'] && stData['digitalPeople'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                        className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aijy">
              <div className={cx(styles.leftTitle)}>AI教育</div>
              <div>
                {
                  stData['education'] && stData['education'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aibc">
              <div className={cx(styles.leftTitle)}>AI编程</div>
              <div>
                {
                  stData['programming'] && stData['programming'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
            <div id="aiyp">
              <div className={cx(styles.leftTitle)}>AI音频</div>
              <div>
                {
                  stData['audio'] && stData['audio'].map((e) => {
                    return (
                      <Card
                        actions={[<span className={styles.actionSpan} key={e.id} onClick={() => handleClickCard(e)}>立即前往<RightCircleOutlined
                          className={styles.rightCo}/></span>]}
                        className={cx(styles.card)}
                        key={e.id}
                      >
                        <Card.Meta
                          avatar={<Image alt="" className={styles.avImg} preview={false} src={e.iconurl}/>}
                          className={styles.cardMeta}
                          description={<span className={styles.desText}>{e.remark}</span>}
                          title={<span className={styles.title}>{e.name}</span>}
                        />
                      </Card>
                    )
                  })
                }
              </div>
            </div>
          </div>
        </>
        :
          <div style={{margin: '0 auto', width: '90%'}}>
            <Title tag={stList.length}>助手列表</Title>
            <div>
              {
                stList.map((e) => {
                  return (
                    <Card
                      actions={[<span className={styles.actionSpan} key={e.id}>查看详情<RightCircleOutlined
                        className={styles.rightCo}/></span>]}
                      className={cx(styles.card)}
                      key={e.id}
                    >
                      <div className={styles.containerTitle}>{e.title}</div>
                      <div className={styles.container}>
                        <div className={styles.verImg}></div>
                        <div className={styles.zsdsCardImg}>
                          <Image alt="" preview={false} src="/images/gjImg.png" />
                        </div>
                      </div>
                      <div className={styles.cardCotain}>
                        <div>
                          <Image alt="" className={styles.desImg} preview={false} src="/images/detaicon.png" />
                          <span className={styles.zsds}>助手大师</span>
                          <span>{e.date}</span>
                        </div>
                        <div>{e.des}</div>
                      </div>
                    </Card>
                  )
                })
              }
            </div>
          </div>
        }
      </div>
    </>
  );
});

export default ApplicationSet;
