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';
const DebugHomeRouterPage = () => {
  const navigate = useNavigate();

  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 [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);
  }

  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);
  }

  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'>杏聆荟学院</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'>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'>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'>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'>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'>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'>platform:</span>
            <select
              className='border p-2 rounded'
              value={platform}
              onChange={(e) => setPlatform(e.target.value)}>
              <option value={FPlatformEnum.web.index}>web</option>
              <option value={FPlatformEnum.webOnWin.index}>win</option>
              <option value={FPlatformEnum.android.index}>android</option>
              <option value={FPlatformEnum.iOS.index}>ios</option>
              <option value={FPlatformEnum.webOnMac.index}>mac</option>
            </select>
          </div>
          <div className='flex items-center mb-4'>
            <span className='mr-2'>subsetTab:</span>
            <select
              className='border p-2 rounded'
              value={subsetTab}
              onChange={(e) => setSubsetTab(e.target.value)}>
              <option value='album'>专辑</option>
              <option value='course'>课程</option>
            </select>
          </div>
        </div>
        <div className='w-[80%] border-l ml-5 p-5'>
          <button
            onClick={getToken}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            获取Token
          </button>
          <button
            onClick={getCourses}
            className='ml-2 p-2 text-sm rounded border border-gray-400'>
            查询前12条数据
          </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'>调试用路由表</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;
