import React, { useState } from 'react'

import { useDispatch } from '../../store'
import { Scene, deleteScene, SceneType } from '../../store/scene'
import { formatDistanceToNow, parseISO } from 'date-fns'
import zh from 'date-fns/locale/zh-CN'

import { EditScene } from './edit-scene'
import { Card, Col, Avatar, Modal, List, Skeleton } from 'antd'
import { EditOutlined, PaperClipOutlined, DeleteOutlined, ExclamationCircleOutlined, SettingOutlined } from '@ant-design/icons';
import style from './style.module.css'
import { useHistory } from 'react-router'

const { Meta } = Card;
const confirm = (msg: string) => {
  return new Promise(resolve => {
    Modal.confirm({
      title: '系统提示',
      icon: <ExclamationCircleOutlined translate={undefined} />,
      content: msg,
      okText: '确认',
      cancelText: '取消',
      onOk: () => resolve(true),
      onCancel: () => resolve(false)
    });
  })
};

export const useSceneLinks = (scene: Scene) => {
  const history = useHistory()
  const goto = (link: string) => () => window.location.href = link

  switch (scene.type) {
    case SceneType.GIS:
      return {
        gotoScene: `http://data3d.4dage.com?sid=${scene.id}`,
        editScene: () => history.push(`/${scene.id}/grid`)
      }
    case SceneType.LASER:
      const gotoLink = `https://laser.4dkankan.com/index.html?m=${scene.m}`
      return {
        gotoScene: gotoLink,
        editScene: goto(gotoLink)
      }
    case SceneType.KANKAN:
      return {
        gotoScene: `https://www.4dkankan.com/spg.html?m=${scene.m}`,
        editScene: goto(`https://www.4dkankan.com/epg.html?m=${scene.m}`)
      }
  }
}

export const SignScene = (scene: Scene & { goto: (link: string) => void }) => {
  const [editIng, setEditIng] = useState(false)
  const date = parseISO(scene.time)
  const timeAgo = formatDistanceToNow(date, { locale: zh })
  const dispatch = useDispatch()
  const deleteHandler = async (ev) => {
    ev.stopPropagation()
    if (await confirm('确定要删除此场景？')) {
      await dispatch(deleteScene(scene.id)).unwrap()
    }
  }
  const { gotoScene, editScene: editSceneRaw } =  useSceneLinks(scene)
  const editScene = (ev) => {
    ev.stopPropagation()
    editSceneRaw()
  }

  const renderActions = [
    // <PaperClipOutlined key="query" translate={undefined} onClick={gotoScene} />,
    // <SettingOutlined key="setting" translate={undefined} onClick={() => setEditIng(true)} />,
    <DeleteOutlined key="delete" translate={undefined} onClick={deleteHandler} />,
  ]

  if (scene.type !== SceneType.LASER) {
    renderActions.unshift(
      <EditOutlined key="edit" translate={undefined} onClick={editScene} />,
    )
  }

  return (
    <>
      {editIng && <EditScene onClose={() => setEditIng(false)} {...scene} />}
      <List.Item actions={renderActions} className={style.scene}  onClick={() => scene.goto(gotoScene)}>
        <List.Item.Meta title={scene.title}/>
      </List.Item>
{/* 
      <Col span={6} className={style.scene}>
        <Card
          bordered={true}
          cover={<img alt={scene.cover} src={scene.cover} />}
          actions={renderActions}>
          <Meta
            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
            title={scene.title}
            description={`创建时间: ${timeAgo}`}
          />
        </Card>
      </Col> */}
    </>
  )
}