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

import MyInputIcon from '/icons/myInput.png';
import RightBlueIcon from '/icons/rightBlue.png';
import style from './index.module.css';

type Props = {
  toRoom: ({initMessage,fileUrl}:{initMessage?:string,fileUrl?:string}) => void;
};

export default function MyInput({ toRoom }: Props) {

  const [searchParams] = useSearchParams()

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


  const handleQuestion = async () => {
    toRoom({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>
  );
}