import React, { useState, useEffect, useCallback } from "react";
import { Table, SearchBox } from "@tencent/tea-component";

const { autotip } = Table.addons;

export default function TableAddonExample() {
  const [keywordInput, setKeywordInput] = useState("");
  const [keyword, setKeyword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [movies, setMovies] = useState([]);

  const load = useCallback(
    async abortToken => {
      setLoading(true);
      setError(null);
      try {
        setMovies(await loadMovieList(keyword, abortToken));
      } catch (err) {
        setMovies([]);
        setError(err);
      } finally {
        setLoading(false);
      }
    },
    [keyword]
  );

  // keyword 变化重新加载
  useEffect(() => {
    setKeywordInput(keyword);
    const abortToken = {};
    load(abortToken);
    return () => {
      abortToken.aborted = true;
    };
  }, [keyword, load]);

  return (
    <>
      <SearchBox
        disabled={loading}
        value={keywordInput}
        onChange={keywordInput => setKeywordInput(keywordInput)}
        onSearch={keyword => setKeyword(keyword)}
        onClear={() => setKeyword("")}
        placeholder="搜索影片/导演/主演"
      />
      <Table
        columns={[
          {
            key: "title",
            header: "电影",
          },
          {
            key: "director",
            header: "导演",
          },
          {
            key: "actors",
            header: "主演",
          },
          {
            key: "region",
            header: "上映地区",
          },
          {
            key: "duration",
            header: "长度",
          },
        ]}
        records={movies}
        addons={[
          autotip({
            isLoading: loading,
            isError: Boolean(error),
            isFound: Boolean(keyword),
            onClear: () => setKeyword(""),
            onRetry: load,
            foundKeyword: keyword,
          }),
        ]}
      />
    </>
  );
}

function loadMovieList(keyword, abortToken) {
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      // 如果表示忽略结果，则不返回了
      if (abortToken && abortToken.aborted) {
        return;
      }
      if (Math.random() > 0.75) {
        reject(new Error("无法加载影片"));
      } else {
        let movies = getAllMovies();
        if (keyword) {
          movies = movies.filter(
            x =>
              x.title.includes(keyword) ||
              x.actors.includes(keyword) ||
              x.director.includes(keyword) ||
              x.region.includes(keyword)
          );
        }
        resolve(movies);
      }
    }, 800)
  );
}

function getAllMovies() {
  return [
    {
      id: "1652592",
      title: "阿丽塔：战斗天使",
      duration: "122分钟",
      region: "美国 加拿大 阿根廷",
      director: "罗伯特·罗德里格兹",
      actors: "罗莎·萨拉查 / 克里斯托弗·沃尔兹 / 基恩·约翰逊",
    },
    {
      id: "19899707",
      title: "驯龙高手3",
      duration: "104分钟",
      region: "美国",
      director: "迪恩·德布洛斯",
      actors: "杰伊·巴鲁切尔 / 亚美莉卡·费雷拉 / 凯特·布兰切特",
    },
    {
      id: "26266893",
      title: "流浪地球",
      duration: "125分钟",
      region: "中国大陆",
      director: "郭帆",
      actors: "屈楚萧 / 吴京 / 李光洁",
      votecount: "1023916",
      subject: "26266893",
    },
    {
      id: "30163509",
      title: "飞驰人生",
      duration: "98分钟",
      region: "中国大陆",
      director: "韩寒",
      actors: "沈腾 / 黄景瑜 / 尹正",
      votecount: "366158",
      subject: "30163509",
    },
    {
      id: "25986662",
      title: "疯狂的外星人",
      duration: "116分钟",
      region: "中国大陆",
      director: "宁浩",
      actors: "黄渤 / 沈腾 / 汤姆·派福瑞",
      votecount: "336633",
      subject: "25986662",
    },
    {
      id: "4840388",
      title: "新喜剧之王",
      duration: "91分钟",
      region: "中国大陆 香港",
      director: "周星驰",
      actors: "王宝强 / 鄂靖文 / 张全蛋",
      votecount: "154964",
      subject: "4840388",
    },
    {
      id: "27083561",
      title: "朝花夕誓",
      duration: "115分钟",
      region: "日本",
      director: "冈田麿里 筱原俊哉",
      actors: "石见舞菜香 / 入野自由 / 茅野爱衣",
      votecount: "15843",
      subject: "27083561",
    },
    {
      id: "30263995",
      title: "一吻定情",
      duration: "122分钟",
      region: "中国大陆",
      director: "陈玉珊",
      actors: "王大陆 / 林允 / 陈柏融",
      votecount: "22245",
      subject: "30263995",
    },
  ];
}