import type { NextPage } from 'next';
import type { IDocument } from '@think/domains';
import Link from 'next/link';
import React from 'react';
import { Typography, Button, Table, Spin, List } from '@douyinfe/semi-ui';
import { useToggle } from 'hooks/useToggle';
import { Seo } from 'components/seo';
import { DataRender } from 'components/data-render';
import { SingleColumnLayout } from 'layouts/single-column';
import { WikiCreator } from 'components/wiki/create';
import { LocaleTime } from 'components/locale-time';
import { DocumentActions } from 'components/document/actions';
import { useStaredWikis } from 'data/wiki';
import { useRecentDocuments } from 'data/document';
import { WikiPinCardPlaceholder, WikiPinCard } from 'components/wiki/pin-card';
import { Empty } from 'components/empty';
import styles from './index.module.scss';

const { Title } = Typography;
const { Column } = Table;

const grid = {
  gutter: 16,
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 8,
};

const RecentDocs = () => {
  const { data, error, loading, refresh } = useRecentDocuments();

  return (
    <>
      <Title heading={3} style={{ margin: '24px 0 0' }}>
        最近访问
      </Title>
      <DataRender
        loading={loading}
        loadingContent={<Spin />}
        error={error}
        normalContent={() =>
          data && data.length ? (
            <Table dataSource={data} loading={loading} pagination={false} size="small" style={{ marginTop: 16 }}>
              <Column
                title="标题"
                dataIndex="title"
                key="title"
                render={(_, document: IDocument) => {
                  return (
                    <Link
                      href={'/wiki/[wikiId]/document/[docId]'}
                      as={`/wiki/${document.wikiId}/document/${document.id}`}
                    >
                      <a style={{ color: 'inherit', textDecoration: 'none' }}>{document.title}</a>
                    </Link>
                  );
                }}
              />
              <Column title="阅读量" dataIndex="views" key="views" />
              <Column
                title="更新时间"
                dataIndex="updatedAt"
                key="updatedAt"
                render={(date) => <LocaleTime date={date} timeago />}
              />
              <Column
                title="操作"
                dataIndex="operate"
                key="operate"
                render={(_, document) => (
                  <DocumentActions
                    wikiId={document.wikiId}
                    documentId={document.id}
                    onStar={refresh}
                    onDelete={refresh}
                    showCreateDocument
                  />
                )}
              />
            </Table>
          ) : (
            <Empty message="最近访问的文档会出现在此处" />
          )
        }
      />
    </>
  );
};

const Page: NextPage = () => {
  const [visible, toggleVisible] = useToggle(false);
  const { data: staredWikis, loading, error } = useStaredWikis();

  return (
    <SingleColumnLayout>
      <Seo title="主页" />
      <div className="container">
        <div className={styles.titleWrap}>
          <Title heading={3} style={{ margin: '8px 0' }}>
            快捷访问
          </Title>
          <>
            <Button onClick={toggleVisible}>创建知识库</Button>
            <WikiCreator visible={visible} toggleVisible={toggleVisible} />
          </>
        </div>
        <DataRender
          loading={loading}
          loadingContent={() => (
            <List
              grid={grid}
              dataSource={[1, 2, 3]}
              renderItem={() => (
                <List.Item>
                  <WikiPinCardPlaceholder />
                </List.Item>
              )}
            />
          )}
          error={error}
          normalContent={() => (
            <List
              grid={grid}
              dataSource={staredWikis}
              renderItem={(wiki) => (
                <List.Item>
                  <WikiPinCard wiki={wiki} />
                </List.Item>
              )}
              emptyContent={<Empty message="收藏的知识库会出现在此处" />}
            />
          )}
        />
        <RecentDocs />
      </div>
    </SingleColumnLayout>
  );
};

export default Page;