"use client";
import apiClient from "@/apiclient/ApiClient";
import { IUser } from "@/app/api/nextauth";
import {
  Autocomplete,
  Box,
  Button,
  FormControlLabel,
  IconButton,
  MenuItem,
  Switch,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { signOut } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { getDashboardUrl } from "../../components/GetDashboardUrl";
import {
  getDisabilitiesOptions,
  getDisabilitiesValue,
  getStandardInterviewOptions,
  getStandardPreferredApproachOptions,
} from "@/app/utility/profile_utility";
import InfoIcon from "@mui/icons-material/Info";
import { DisabilityDto } from "@/apiclient/endpoints/panel/profile";

const PanelProfileData = ({ session }: { session: any }) => {
  const router = useRouter();
  const [profilePreferences, setProfileData] = useState({
    preferredInterviewType: "",
    preferredApproachType: "",
    commercialApproaches: false,
  });

  const [profileDisabilities, setProfileDisabilities] = useState<string[]>([]);

  const navigateTo = (path: string) => {
    router.push(path);
  };

  const handleProfileSetup = async () => {
    try {
      const response =
        await apiClient.panel.profile.addPreferenceData(profilePreferences);
      console.log(response);

      navigateTo(getDashboardUrl(session.data?.user));
    } catch (error) {
      if (error instanceof Error) {
        console.log(error.message);
      }
    }
  };

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        bgcolor: "background.paper",
        padding: 3,
        boxShadow: 10,
        borderRadius: 3,
      }}
    >
      <Typography component="h1" variant="h5">
        Vul nu uw voorkeuren in!
      </Typography>
      <TextField
        label="Voorkeur Interview Type"
        select
        variant="outlined"
        margin="normal"
        fullWidth
        value={profilePreferences.preferredInterviewType}
        onChange={(e) =>
          setProfileData({
            ...profilePreferences,
            preferredInterviewType: e.target.value,
          })
        }
      >
        {getStandardInterviewOptions().map((option) => (
          <MenuItem key={option} value={option}>
            {option}
          </MenuItem>
        ))}
      </TextField>
      <TextField
        label="Voorkeur Benaderings Type"
        select
        variant="outlined"
        margin="normal"
        fullWidth
        value={profilePreferences.preferredApproachType}
        onChange={(e) =>
          setProfileData({
            ...profilePreferences,
            preferredApproachType: e.target.value,
          })
        }
      >
        {getStandardPreferredApproachOptions().map((option) => (
          <MenuItem key={option} value={option}>
            {option}
          </MenuItem>
        ))}
      </TextField>

      <Typography variant="h6" paragraph>
        Commerciële benaderingen
        <Tooltip title="Hiermee geeft u aan of dat u door commerciale bedrijven wil benaderd worden.">
          <IconButton
            size="small"
            style={{ marginLeft: "5px" }}
            color="primary"
            aria-label="info"
          >
            <InfoIcon fontSize="inherit" />
          </IconButton>
        </Tooltip>
      </Typography>
      <FormControlLabel
        control={
          <Switch
            checked={profilePreferences?.commercialApproaches ?? false}
            onChange={(e) =>
              setProfileData({
                ...profilePreferences,
                commercialApproaches: !profilePreferences.commercialApproaches,
              })
            }
            color="primary"
          />
        }
        label={profilePreferences?.commercialApproaches ? "Ja" : "Nee"}
      />

      <Typography variant="h6" paragraph>
        Beperkingen
      </Typography>
      <Autocomplete
        multiple
        id="disabilities"
        options={getDisabilitiesOptions()}
        value={profileDisabilities}
        onChange={(_, selectedDisabilities: string[]) => {
          setProfileDisabilities(selectedDisabilities);
        }}
        disableCloseOnSelect
        renderInput={(params) => (
          <TextField {...params} label="Beperkingen" margin="normal" />
        )}
      />


      <Button
        type="submit"
        fullWidth
        variant="contained"
        sx={{ mt: 3 }}
        onClick={handleProfileSetup}
      >
        Setup Profiel
      </Button>
      <Button
        type="submit"
        fullWidth
        variant="contained"
        color="error"
        sx={{ mt: 3, mb: 2 }}
        onClick={() => signOut({ redirect: true, callbackUrl: "/" })}
      >
        Log uit
      </Button>
    </Box>
  );
};

export default PanelProfileData;