import { useState } from "react";
import SoundIcon from "../icons/SoundIcon";
import VideoFilledIcon from "../icons/VideoFilledIcon";
import ModalWrapper from "../ModalWrapper";
import Button from "../ui/Button";
import RangeInput from "../ui/RangeInput";
import Select from "../ui/Select";
import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
import Switch from "../ui/Switch";

const microphoneOptions = ["Realtek HD Microphone"];
const speakerOptions = ["Realtek HD Audio"];
const cameraOptions = ["Realtek HD Camera"];

function SettingsModal() {
  const [microphoneVolume, setMicrophoneVolume] = useState(50);
  const [speakerVolume, setSpeakerVolume] = useState(50);

  const [selectedMicrophone, setSelectedMicrophone] = useState(
    microphoneOptions[0]
  );
  const [selectedSpeaker, setSelectedSpeaker] = useState(speakerOptions[0]);
  const [camera, setCamera] = useState(cameraOptions[0]);

  const [mediaType, setMediaType] = useState<"sound" | "video">("sound");

  const [participantsVideosHidden, setParticipantsVideosHidden] =
    useState(false);

  return (
    <ModalWrapper title="Настройки">
      <div className="2xl:space-y-[1.389vw] space-y-5 2xl:-mt-[1.389vw] -mt-5">
        <div className="flex">
          <Button
            variant="menu"
            size="large"
            className="w-full"
            onClick={() => setMediaType("sound")}
          >
            <div className="flex 2xl:gap-[0.556vw] items-center">
              <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
                <SoundIcon />
              </div>
              <p className="font-medium">Звук</p>
            </div>
          </Button>
          <Button
            variant="menu"
            size="large"
            className="w-full"
            onClick={() => setMediaType("video")}
          >
            <div className="flex 2xl:gap-[0.556vw] items-center">
              <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
                <VideoFilledIcon />
              </div>
              <p className="font-medium">Видео</p>
            </div>
          </Button>
        </div>
        {mediaType === "sound" && (
          <div className="2xl:space-y-[1.667vw] space-y-6">
            <div className="2xl:space-y-[0.833vw] space-y-3">
              <p className="title-s font-medium">Микрофон</p>
              <div className="2xl:space-y-[1.111vw] space-y-4">
                <div className="flex 2xl:gap-[0.556vw]">
                  <Select
                    className="flex-1"
                    options={microphoneOptions}
                    defaultOption={selectedMicrophone}
                    onSelect={setSelectedMicrophone}
                  />
                  <Button variant="cta" size="large">
                    Проверить
                  </Button>
                </div>
                <div className="flex items-center 2xl:gap-[0.833vw]">
                  <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
                    <MicrophoneFilledIcon />
                  </div>
                  <RangeInput
                    value={microphoneVolume}
                    onChange={setMicrophoneVolume}
                  />
                  <p className="caption-xs font-medium text-[#7D7D7D] 2xl:w-[1.667vw] w-6">
                    {microphoneVolume.toFixed(0)}%
                  </p>
                </div>
              </div>
            </div>
            <hr className="bg-[#F6F6F6] 2xl:h-[0.069vw] h-px" />
            <div className="2xl:space-y-[0.833vw] space-y-3">
              <p className="title-s font-medium">Динамик</p>
              <div className="2xl:space-y-[1.111vw] space-y-4">
                <div className="flex 2xl:gap-[0.556vw]">
                  <Select
                    className="flex-1"
                    options={speakerOptions}
                    defaultOption={selectedSpeaker}
                    onSelect={setSelectedSpeaker}
                  />
                  <Button variant="cta" size="large">
                    Проверить
                  </Button>
                </div>
                <div className="flex items-center 2xl:gap-[0.833vw]">
                  <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
                    <SoundIcon />
                  </div>
                  <RangeInput
                    value={speakerVolume}
                    onChange={setSpeakerVolume}
                  />
                  <p className="caption-xs font-medium text-[#7D7D7D] 2xl:w-[1.667vw] w-6">
                    {speakerVolume.toFixed(0)}%
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}
        {mediaType === "video" && (
          <div className="2xl:space-y-[1.667vw] space-y-6">
            <div className="2xl:space-y-[0.556vw] space-y-2">
              <p className="title-s font-medium">Камера</p>
              <Select
                options={cameraOptions}
                onSelect={setCamera}
                defaultOption={camera}
              />
              <div className="2xl:w-[25vw] w-[360px] aspect-[360/202] bg-[#F6F6F6] 2xl:rounded-[1.111vw] rounded-2xl" />
            </div>
            <div className="flex items-start 2xl:gap-[0.556vw] gap-2">
              <Switch
                enabled={participantsVideosHidden}
                onChange={setParticipantsVideosHidden}
              />
              <div className="2xl:space-y-[0.278vw] space-y-1">
                <p className="text-m">Скрыть видео участников</p>
                <p className="caption-s text-[#7D7D7D]">
                  Это снизит нагрузку на сеть
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </ModalWrapper>
  );
}

export default SettingsModal;
