"use client";
import { useState } from "react";

interface Measurements {
  height: number;
  weight: number;
}

const height = 61;
const weight = 50;

const betweenHgt = (height: number, min: number, max: number) => {
  return height >= min && height <= max;
};

const betweenWgt = (weight: number, min: number, max: number) => {
  return weight >= min && weight <= max;
};

const sn_xs = "xs";
const sn_s = "s";
const sn_m = "m";
const sn_l = "l";
const sn_xl = "xl";
const sn_2xl = "2xl";
const sn_cstm = "Custom";

const getSizeWomen = (height: number, weight: number): string => {
  if (betweenHgt(height, 55, 57) && betweenWgt(weight, 40, 55)) return sn_xs;
  if (betweenHgt(height, 58, 65) && betweenWgt(weight, 40, 50)) return sn_xs;
  if (betweenHgt(height, 66, 71) && betweenWgt(weight, 40, 45)) return sn_xs;
  

  if (betweenHgt(height, 55, 57) && betweenWgt(weight, 56, 65)) return sn_s;
  if (betweenHgt(height, 58, 65) && betweenWgt(weight, 51, 60)) return sn_s;
  if (betweenHgt(height, 66, 71) && betweenWgt(weight, 46, 60)) return sn_s;

  if (betweenHgt(height, 55, 57) && betweenWgt(weight, 66, 75)) return sn_m;
  if (betweenHgt(height, 58, 65) && betweenWgt(weight, 61, 70)) return sn_m;
  if (betweenHgt(height, 66, 71) && betweenWgt(weight, 61, 75)) return sn_m;

  if (betweenHgt(height, 55, 57) && betweenWgt(weight, 76, 90)) return sn_l;
  if (betweenHgt(height, 58, 65) && betweenWgt(weight, 71, 85)) return sn_l;
  if (betweenHgt(height, 66, 71) && betweenWgt(weight, 76, 80)) return sn_l;

  if (betweenHgt(height, 55, 57) && betweenWgt(weight, 91, 100)) return sn_xl;
  if (betweenHgt(height, 58, 67) && betweenWgt(weight, 86, 100)) return sn_xl;
  if (betweenHgt(height, 66, 67) && betweenWgt(weight, 81, 85)) return sn_xl;
  if (betweenHgt(height, 68, 71) && betweenWgt(weight, 81, 90)) return sn_xl;

  if (betweenHgt(height, 68, 71) && betweenWgt(weight, 91, 100)) return sn_2xl;

  if (betweenHgt(height, 55, 79) && betweenWgt(weight, 101, 120)) return sn_cstm;
  if (betweenHgt(height, 72, 79) && betweenWgt(weight, 40, 100))
    return sn_cstm;

  return "-/-";
};

export default function SizeCalculatorWomen() {
  const [measurements, setMeasurements] = useState<Measurements>({
    height: height,
    weight: weight,
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setMeasurements({
      ...measurements,
      [e.target.name]: Number(e.target.value),
    });
  };


  const formatInchToFeetInch = (totalInches: number): string => {
    const feet = Math.floor(totalInches / 12);
    const inches = totalInches % 12;
  
    const parts: string[] = [];

    if (feet > 0) parts.push(`${feet}'`);
    if (inches > 0) parts.push(`${inches}"`);
  
    return parts.join('');
  }

  const size: string = getSizeWomen(measurements.height, measurements.weight);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex w-full flex-col gap-12">
      {Object.keys(measurements).map((key, index) => (
          <div key={key} className="font-bogart flex flex-col">
            <div className="flex w-full justify-between items-center align-middle">
              <span className="font-medium text-gray-950">
                {key.charAt(0).toUpperCase() + key.slice(1)}
              </span>
              <div className="flex flex-col items-end justify-end text-right align-middle">
              {index === 0 && (
                  <i className="inline-flex justify-end font-bogart font-medium text-right text-xl/3 not-italic">
                    {formatInchToFeetInch(measurements[key as keyof Measurements])}
                  </i>
                )}
                <span>
                  {measurements[key as keyof Measurements]}{" "}
                  {key === "height" ? "Inch" : "kg"}
                </span>
              </div>
            </div>
            <div className="relative top-2">
              <div className="hairline absolute top-[11px] left-0 z-3 flex h-1.5 w-full bg-teal-600/50"></div>
              <div className="relative z-20">
                <input
                  type="range"
                  name={key}
                  min={key === "height" ? "55" : "40"}
                  max={key === "height" ? "79" : "120"}
                  value={measurements[key as keyof Measurements]}
                  onChange={handleChange}
                  className="range-slider"
                />
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="flex w-full flex-col items-center justify-center pt-4">
        <div className="relative flex h-50 w-50 items-center justify-center overflow-hidden rounded-full p-4">
          <div className="hairline absolute top-0 left-0 z-10 h-full w-full animate-pulse bg-blue-200"></div>
          <div className="bgnoise relative z-30 flex h-full w-full flex-col items-center justify-center gap-1 rounded-full border-8 border-gray-950/10">
            <div className="text-xs capitalize">
              {size === "-/-" ? (
                <span>Try other h/w</span>
              ) : (
                <span>Recommended Size</span>
              )}
            </div>
            <div className="font-bogart font-600 text-3xl tracking-wider text-teal-600 uppercase">
              {size}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}