'use client';

import { Grid } from '@lobehub/ui';
import {Button, Empty, Image, Tag} from 'antd';
import Link from 'next/link';
import {memo, useMemo, useState} from 'react';
import { useTranslation } from 'react-i18next';
import urlJoin from 'url-join';
import { useRouter } from 'next/navigation';
import { DiscoverAssistantItem } from '@/types/discover';

import SearchResultCount from '../../../components/SearchResultCount';
import Title from '../../../components/Title';
import VirtuosoGridList from '../../../components/VirtuosoGridList';
import Card from './Card';
import {createStyles} from "antd-style";

export interface ListProps {
  category?: string;
  items?: DiscoverAssistantItem[];
  mobile?: boolean;
  searchKeywords?: string;
}

const useStyles = createStyles(({css, token}) => ({
  top: css`
    padding: 20px 0px;
    box-sizing: border-box;
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: rgba(187, 204, 253, 0.24);
    padding: 20px 50px;
  `,
  topFirAc: css`
    width: 86px;
    height: 86px;
    display: inline-block;
    border-radius: 86px;
    border: 4px solid #6D94FF;
  `,
  topSecAc: css`
    width: 60px;
    height: 60px;
    border-radius: 60px;
    margin: 9px;
    text-align: center;
    line-height: 50px;
    font-size: 26px;
    border: 4px solid #6D94FF;
  `,
  topBtn: css`
    border-radius: 20px;
    color: #2E62FF;
    border: 1px solid #2E62FF;
  `,
  topRight: css`
    width: 50%;
    text-align: right;
    display: inline-block
  `,
  topLeft: css`
   width: 50%;
   display: inline-block
  `,
  title: css`
    display: inline-block;
    vertical-align: middle;
    margin-top: -10px;
    margin-left: 25px
   `,
  des: css`
   margin-top: 5px;
   font-size: 12px;
   color: #999
  `,
  desImg: css`
    margin: 0px 5px;
    width: 20px
  `,
  time: css`
    display: inline-block;
    margin-left: 5px
  `,
  conTitle: css`
    margin: 12px 0;
    width: 125px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    border-radius: 0px 129px 129px 0px;
    opacity: 1;
    background: linear-gradient(270deg, #2D65FF 0%, rgba(0, 166, 255, 0.52) 99%);
  `,
  description: css`
    padding: 20px 50px;
  `,
  tag: css`
    padding: 0px 50px;
    margin-bottom: 20px;
  `,
  set: css`
    padding: 0px 30px 20px;
  `,
  setBtn: css`
    background: #EDF2FF;
    width: 80px;
    border-radius: 40px;
    color: #0044FF;
  `,
  setText: css`
    padding: 0px 50px 20px;
  `,
  setOl: css`
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #0044FF;
    margin-right: 10px;
  `,
  rwDes: css`
    padding: 0px 70px 20px;
  `,
}))

const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] }) => {
  const { t } = useTranslation('discover');
  const { styles, cx } = useStyles()
  const router = useRouter()
  const { all, recent, last } = useMemo(() => {
    const recentLength = mobile ? 4 : 8;
    return {
      all: items,
      last: items.slice(recentLength),
      recent: items.slice(0, recentLength),
    };
  }, [items, mobile]);
  console.log(category,recent,last,92929292)
  const [val, setVal] = useState("")

  const handleClickCard = (item) => {
    console.log(item)
    setVal(item)
    router.push(urlJoin('/discover/assistant/', item.identifier))
  }

  const handleBack = () => {
    setVal("")
  }

  if (searchKeywords) {
    if (!items || items?.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    return (
      <>
        <SearchResultCount count={all.length} keyword={searchKeywords} />
        <VirtuosoGridList
          data={all}
          initialItemCount={24}
          itemContent={(_, item) => (
            // <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
              <Card onClick={() => handleClickCard(item)} showCategory variant={'compact'} {...item} />
            // </Link>
          )}
          style={{
            minHeight: '75vh',
          }}
        />
      </>
    );
  }

  return (
    <>
      {category == "collect"?(
        <>
          <Title tag={all.length}>收藏列表</Title>
          <Grid maxItemWidth={280} rows={4}>
            {all.map((item) => (
              // <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
                <Card onClick={() => handleClickCard(item)} showCategory={!category} {...item} />
              // </Link>
            ))}
          </Grid>
        </>
      ):(
        <>
          <Title tag={recent.length}>{t('assistants.recentSubmits')}</Title>
          <Grid maxItemWidth={280} rows={4}>
            {recent.map((item) => (
              // <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
                <Card onClick={() => handleClickCard(item)} showCategory={!category} {...item} />
              // </Link>
            ))}
          </Grid>
          {last && last?.length > 0 && (
            <>
              <Title tag={last.length}>{t('assistants.list')}</Title>
              <VirtuosoGridList
                data={last}
                initialItemCount={12}
                itemContent={(_, item) => (
                  <Card onClick={() => handleClickCard(item)} showCategory={!category} variant={'compact'} {...item} />
                )}
                style={{
                  minHeight: '75vh',
                  overflowY: 'visible'
                }}
              />
            </>
          )}
        </>
      )}
    </>
  );
});

export default List;
