import React, { useState } from 'react';
import { Modal, List, Tag, Popconfirm } from 'antd';
import { LOCAL_STORE } from '@src/utils/const';
import dayjs from 'dayjs';
import { HistoryLocalInfo } from '@src/utils/global';
import { mdEditorRef, renderViewStyle } from "@src/utils/global";
import { useStores } from "@src/store";
import { getTheme } from "@utils/changeThemes";
import "./index.less";


const History = () => {
  const localData = localStorage.getItem(LOCAL_STORE.MD_HISTORY);
  const data: HistoryLocalInfo[] = JSON.parse(localData || "[]").reverse() || [];
  const { templateStore } = useStores();
  const { setPreview, setTheme, setMdContent, setColor } = templateStore;
  const handleSelect = (md: string, theme: string, color: string) => {
    // 设置主题
    setTheme(theme);
    localStorage.setItem(LOCAL_STORE.MD_THEME, theme);
    // 设置颜色 
    setColor(color);
    localStorage.setItem(LOCAL_STORE.MD_COLOR, color);
    // 设置内容
    setMdContent(md)
    // 持久化设置
    localStorage.setItem(LOCAL_STORE.MD_RESUME, md);
    // 临时设置
    setTimeout(async () => {
      // 设置编辑器内容
      mdEditorRef && (mdEditorRef.setValue(md));
      // 拉取主题
      await getTheme(theme);
      document.body.style.setProperty("--bg", color);
      // 设置 html 渲染
      renderViewStyle(color)
    }, 300);

    setPreview(false);
  }
  const [ visible, setVisible ] = useState(false);
  return (
    <>
      <a
        className="ant-dropdown-link rs-link"
        onClick={(e) => {
          e.preventDefault();
          setVisible(true);
        }}
      >
        历史记录
      </a>
      <Modal
        title="历史记录"
        visible={visible}
        onCancel={() => {
          setVisible(false);
        }}
        footer={null}
        width={1100}
        >
        <List
          className="history-list"
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <List.Item
              actions={[
                <Popconfirm
                  title="确定使用此版本替换你当前编辑器中的内容吗?"
                  onConfirm={() => {
                    const { md, theme, color } = item;
                    handleSelect(md, theme, color);
                    setVisible(false);
                  }}
                  okText="决定了"
                  cancelText="再想想"
                >
                  <span className="btn btn-normal mr20">选择</span>
                </Popconfirm>
              ]}
            >
              <List.Item.Meta
                avatar={""}
                title={dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                description={item.md.slice(0, 800) + '...'}
              />
              <span className="hist">{ item.theme }</span>
              <Tag color={item.color}>{item.color}</Tag>
            </List.Item>
          )}
          ></List>
      </Modal>
    </>
  )
}

export default History;