import { React, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSessionStorage } from 'react-use';
import * as coursesAPI from '../apis/coursesAPI';
import routes from '../router/mainRoute';
import FPlatformEnum from '../utils/enum';
import { useTranslation } from 'react-i18next';
import { showTranslations } from 'translation-check';
import enTranslation from '../i18n/en.json';
import zhTranslation from '../i18n/zh.json';

const DebugHomeRouterPage = () => {
  const navigate = useNavigate();
  const { t, i18n } = useTranslation();

  const [token, setToken] = useSessionStorage('token', '');
  const [username, setUsername] = useSessionStorage('username4Debug', '');
  const [password, setPassword] = useSessionStorage('password4Debug', '');
  const [courseCode, setCourseCode] = useSessionStorage('courseCode4Debug', '');
  const [keyword, setKeyword] = useSessionStorage('keyword4Debug', '');
  const [subsetTab, setSubsetTab] = useSessionStorage(
    'subsetTab4Debug',
    'course',
  );
  const [platform, setPlatform] = useSessionStorage(
    'platform',
    FPlatformEnum.web.index,
  );
  const [language, setLanguage] = useState('zh');
  const [debugData, setDebugData] = useState(null);

  const handleRoute = (routePath) => {
    navigate(routePath);
  };

  /// 路由定义转真实路由
  function realRoute(routePath) {
    return routePath
      .replace(/:token/g, token)
      .replace(/:platform/g, platform)
      .replace(/:courseCode/g, courseCode)
      .replace(/:subsetTab/g, subsetTab)
      .replace(/:language\?/g, language);
  }

  function useGavin() {
    setUsername('gavin');
    setPassword('abc123');
  }

  function useLoki0() {
    setUsername('Loki0');
    setPassword('abc123');
  }

  function useLoki2() {
    setUsername('Loki2');
    setPassword('abc123');
  }

  function useLoki9() {
    setUsername('Loki9');
    setPassword('abc123');
  }

  function getToken() {
    coursesAPI
      .getToken(username, password)
      .then((res) => {
        setToken(res.Token);
      })
      .catch((err) => {
        setToken('Get Token Error');
        console.log(err);
      });
  }

  function applyCode(code) {
    setCourseCode(code);
  }

  // 切换语言
  function changeLanguage(lang) {
    console.log('%c Line:61 🥕 lang', 'color:#93c0a4', lang);
    // i18n.changeLanguage(lang);
    setLanguage(lang);
  }

  // 检查翻译内容
  // function checkTranslation() {
  //   showTranslations({
  //     en: enTranslation,
  //     zh: zhTranslation,
  //   });
  // }

  // 进入视频播放器 Demo
  function routeToVideoPlayer() {
    let mockFileUrl =
      'aHR0cDovLzEzMDA5ODQ3MDQudm9kMi5teXFjbG91ZC5jb20vOTkzMDBmYzZ2b2RjcTEzMDA5ODQ3MDQvZDgyNTAxYWEzMjcwODM1MDE0MDA1NzEwNDIxL2p1bzV6UXdRS05JQS5tcDQ=';
    let mockFileUrl2 =
      'aHR0cHM6Ly92b2QuZmx5aW5zb25vLmNvbS85OTMwMGZjNnZvZGNxMTMwMDk4NDcwNC8yZWQyNjAxNjU1NzY2NzgwMjE5Mjg1ODg2MjIvb252SFlhV1NFSmtBLm1wNA==';
    let platformParam = platform;
    let languageParam = language;
    let demoUrl =
      '/video_player' + `/${mockFileUrl2}/${platformParam}/${languageParam}`;
    navigate(demoUrl);
  }

  async function getCourses() {
    const data = await coursesAPI.fetchCoursesData('', 1, subsetTab, keyword);
    setDebugData(data.result.PageData);
  }

  return (
    <div className='flex flex-col items-center justify-center min-h-screen w-full h-full'>
      <div className='text-5xl m-5'>{t('杏聆荟学院')}</div>
      <div className='w-[80%] flex flex-row content-between border-b'>
        <div className='flex flex-col justify-start items-start '>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('username')}:</span>
            <input
              type='text'
              className='border p-2 rounded'
              placeholder='请输入username'
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('password')}:</span>
            <input
              type='password'
              className='border p-2 rounded'
              placeholder='请输入password'
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('token')}:</span>
            <input
              type='text'
              className='border p-2 rounded'
              placeholder='请输入token'
              value={token}
              onChange={(e) => setToken(e.target.value)}
            />
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('courseCode')}:</span>
            <input
              type='text'
              className='border p-2 rounded'
              placeholder='请输入courseCode'
              value={courseCode}
              onChange={(e) => setCourseCode(e.target.value)}
            />
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('keyword')}:</span>
            <input
              type='text'
              className='border p-2 rounded'
              placeholder='请输入keyword'
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
            />
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('platform')}:</span>
            <select
              className='border p-2 rounded'
              value={platform}
              onChange={(e) => setPlatform(e.target.value)}>
              <option value={FPlatformEnum.web.index}>{t('web')}</option>
              <option value={FPlatformEnum.webOnWin.index}>{t('win')}</option>
              <option value={FPlatformEnum.android.index}>
                {t('android')}
              </option>
              <option value={FPlatformEnum.iOS.index}>{t('ios')}</option>
              <option value={FPlatformEnum.webOnMac.index}>{t('mac')}</option>
            </select>
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('subsetTab')}:</span>
            <select
              className='border p-2 rounded'
              value={subsetTab}
              onChange={(e) => setSubsetTab(e.target.value)}>
              <option value='album'>{t('专辑')}</option>
              <option value='course'>{t('课程')}</option>
            </select>
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>{t('Language')}:</span>
            <select
              className='border p-2 rounded'
              value={language}
              onChange={(e) => changeLanguage(e.target.value)}>
              <option value='zh'>{t('中文')}</option>
              <option value='en'>{t('英文')}</option>
              <option value='ru'>{t('俄文')}</option>
              <option value='es'>{t('西班牙文')}</option>
            </select>
          </div>
        </div>
        <div className='w-[80%] border-l ml-5 p-5'>
          <button
            onClick={useGavin}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {'Gavin 的账号'}
          </button>
          <button
            onClick={useLoki0}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {'Loki0 的账号'}
          </button>
          <button
            onClick={useLoki2}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {'Loki2 的账号'}
          </button>
          <button
            onClick={useLoki9}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {'Loki9 的账号'}
          </button>
          <button
            onClick={getToken}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {t('获取Token')}
          </button>
          <button
            onClick={getCourses}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {t('查询前12条数据')}
          </button>
          {/* <button
            onClick={checkTranslation}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {t('检查翻译')}
          </button> */}
          <button
            onClick={routeToVideoPlayer}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            {t('播放器测试')}
          </button>
          <div className='flex flex-col h-[280px] justify-start items-start mt-5 overflow-auto'>
            {debugData &&
              debugData.map((course, index) => (
                <div
                  key={course.Code}
                  className='flex flex-col justify-start items-start m-1 p-1 border hover:bg-gray-200 rounded cursor-pointer'
                  onClick={() => applyCode(course.Code)}>
                  <div className='text-xs font-bold'>
                    {index + 1 + ' : ' + course.Name}
                  </div>
                  <div className='text-sm'>{course.Code}</div>
                </div>
              ))}
          </div>
        </div>
      </div>
      <div className='text-2xl m-5'>{t('调试用路由表')} </div>
      <div className='w-[80%] flex flex-col justify-start items-start'>
        {routes.map((route) => (
          <button
            key={route.path}
            className='flex flex-row content-center items-center p-2 m-1 rounded border hover:bg-gray-100'
            onClick={() => handleRoute(realRoute(route.path))}>
            <div
              key={route.path}
              className={'whitespace-nowrap text-base font-bold '}>
              {route.title}
            </div>
            <div className='text-sm ml-2 text-gray-500 break-all'>
              {realRoute(route.path)}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};

export default DebugHomeRouterPage;
