'use client';

import { Avatar, Icon, Tag } from '@lobehub/ui';
import { Button } from 'antd';
import { createStyles } from 'antd-style';
import { startCase } from 'lodash-es';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
import qs from 'query-string';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { Flexbox } from 'react-layout-kit';
import urlJoin from 'url-join';

import { DiscoverPlugintem } from '@/types/discover';

import Back from '../../../features/Back';
import { useUserStore } from '@/store/user';
import { useRouter } from 'next/navigation';
import Actions from './Actions';

export const useStyles = createStyles(({ css, token }) => ({
  conTitle: css`
    width: 125px;
    height: 40px;
    line-height: 40px;
    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: 0 45px;
    margin-top: 10px;
  `,
  tag: css`
    padding: 0px 45px;
    margin-bottom: 10px;
  `,
  time: css`
    font-size: 12px;
    color: ${token.colorTextDescription};
  `,
  title: css`
    margin-block: 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
  `,
  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;
  `,
  topBtn: css`
    border-radius: 20px;
    color: #2E62FF;
    border: 1px solid #2E62FF;
  `,
}));

interface HeaderProps {
  data: DiscoverPlugintem;
  identifier: string;
  mobile?: boolean;
}
const getUserId = (s: { user?: { id?: any } }) => s.user?.id;
const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
  const { styles, theme } = useStyles();
  // const { t } = useTranslation('discover');
  const router = useRouter()
  const userId = getUserId(useUserStore.getState())
  const handleBack = () => {
    router.push('/discover/plugins?userid=' + userId)
  }
  return (
    <Flexbox gap={12} width={'100%'}>
      <Flexbox align={'center'} className={styles.top} gap={8} horizontal justify={'space-between'} width={'100%'}>
        <Flexbox align={'center'} gap={16} horizontal justify={'flex-start'}>
          <Avatar
            alt={identifier}
            animation
            avatar={data.meta.avatar}
            background={theme.colorFillTertiary}
            size={48}
            style={{ flex: 'none' }}
          />
          <Flexbox gap={4}>
            <h1 className={styles.title}>{data.meta.title}</h1>
            <Flexbox align={'center'} gap={8} horizontal>
              <Link href={data.homepage} target={'_blank'}>
                @{data.author}
              </Link>
              <time className={styles.time} dateTime={new Date(data.createdAt).toISOString()}>
                {data.createdAt}
              </time>
            </Flexbox>
          </Flexbox>
          <Actions data={data} identifier={identifier} />
        </Flexbox>
        {!mobile && (
          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
            <Button className={styles.topBtn} onClick={() => handleBack()}>返回列表</Button>
          </Flexbox>
        )}
      </Flexbox>
      <div className={styles.conTitle}>简介</div>
      <div className={styles.description}>{data.meta.description}</div>
      <div className={styles.tag}>
        {data.meta.tags && (
          <Flexbox gap={4} horizontal wrap={'wrap'}>
            {data.meta.tags.map((tag) => (
              <Tag key={tag} style={{ margin: 0 }}>
                {startCase(tag).trim()}
              </Tag>
            ))}
          </Flexbox>
        )}
      </div>
      <div className={styles.conTitle}>参数</div>
    </Flexbox>
  );
});

export default Header;
