import Link from "next/link";
import React, { useState } from "react";
import { useRouter } from "next/router";

type TestRulesProps = {
  examType?: "psychometric" | "skill";
};

const TestRules = ({ examType = "psychometric" }: TestRulesProps) => {
  const [getIsReady, setIsReady] = useState(false);
  const router = useRouter();
  const { examId, jobId } = router.query;
  const isSkillTest = examType === "skill";
  const testLabel = isSkillTest ? "Skill Test" : "Psychometric Test";
  const skillQuery = [`examId=${examId}`, jobId ? `jobId=${jobId}` : null]
    .filter(Boolean)
    .join("&");
  const startHref = isSkillTest
    ? `/dashboard/skill-test/take/${examId}?${skillQuery}`
    : `/dashboard/psychometic-test/take/${examId}`;
  const testRules = [
    "Read each question carefully before selecting your answer.",
    "Choose the option that best reflects your natural behavior and thinking style.",
    "Answer each question based on your best judgment and avoid random guessing.",
    "Do not refresh, close, or switch tabs during the assessment.",
    "Complete the test in one sitting without unnecessary interruptions.",
    "Use a stable internet connection to avoid submission issues.",
    "Once submitted, your responses cannot be edited.",
    "Click Start Test only when you are ready to begin.",
  ];

  return (
    <div className="test_rules widget-content">
      <ul>
        {testRules.map((rule, index) => (
          <li key={index}>
            <i className="la la-laptop"></i>
            {rule}
          </li>
        ))}
      </ul>
      <div className="ready_to_start pt-5 pb-3">
        <div className="checkbox-wrapper ">
          <input
            id="checkbox-ready"
            name="checkbox-ready"
            type="checkbox"
            onChange={() => {
              setIsReady(!getIsReady);
            }}
          />
          <label className="terms-label" htmlFor="checkbox-ready">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 200 200"
              className="checkbox-svg"
            >
              <mask fill="white" id="path-1-inside-1_476_5-37">
                <rect height="200" width="200"></rect>
              </mask>
              <rect
                mask="url(#path-1-inside-1_476_5-37)"
                strokeWidth="40"
                className="checkbox-box"
                height="200"
                width="200"
              ></rect>
              <path
                strokeWidth="15"
                d="M52 111.018L76.9867 136L149 64"
                className="checkbox-tick"
              ></path>
            </svg>
            <span className="label-text">
              I am ready to start the {testLabel}
            </span>
          </label>
        </div>
        <div className="start_test pt-4">
          <Link
            href={startHref}
            className={`hc_button text-dark d-inline-block ${!getIsReady ? "disabled" : ""}`}
          >
            Start Test
          </Link>
        </div>
      </div>
    </div>
  );
};

export default TestRules;