import { useSearchParams } from 'react-router-dom';

import MyInputIcon from '/icons/myInput.png';
import RightBlueIcon from '/icons/rightBlue.png';
import style from './index.module.css';
import { RealtimeClientContext } from '../Provider/RealtimeClientProvider';
import { useContext } from 'react';


export default function MyInput() {

  const [searchParams] = useSearchParams()

  const provinceName = searchParams.get('provinceName') || '山东省'
  const subjectGroup = searchParams.get('subjectGroup') || '物/化/史'
  const expectedScore = searchParams.get('expectedScore') || 500

  const { handleConnect } = useContext(RealtimeClientContext);


  const handleQuestion = async () => {
    handleConnect({initMessage:`我的高考地点在${provinceName},我选择的科目是${subjectGroup},我的高考分数为${expectedScore}分。帮我出一个科学的参考志愿表`});
  };

  return (
    <div className={style.scoreWrapper}>
      <div className={style.innerWrapper}>
        <div className={style.left}>
          <img src={MyInputIcon} className={style.imgIcon} alt="input-ico" />
          <div className={style.detail}>
            <div className={style.city}>{provinceName}</div>
            <div className={style.subject}>{(subjectGroup as string).split(',').join('/') }</div>
            <div className={style.score}>{expectedScore}分</div>
          </div>
        </div>
        <div className={style.right} onClick={handleQuestion}>
          <span>智能分析</span>
          <img src={RightBlueIcon} alt="right" className={style.rightBlue} />
        </div>
      </div>
    </div>
  );
}