"use client";

import Image from "next/image";
import React, { useState } from "react";

import MiniChart from "@/assets/svg/icons/mini-chart.svg";
import { Button } from "@/components/ui/button/button";
import type { RangeValue } from "@/components/ui/range-slider/range-slider";
import { RangeSlider } from "@/components/ui/range-slider/range-slider";
import { useLocale } from "@/hooks/useLocale";
import { PriceManager } from "@/libs/price-manager/price-manager";
import { cn } from "@/libs/utils";

interface PriceRangeProps {
  rangeValues: RangeValue;
  initalRangeValues: RangeValue;
  currencySymbol?: string;
  onChange: (value: RangeValue) => void;
}

function PriceRange({
  rangeValues,
  initalRangeValues,
  currencySymbol = "TRY",
  onChange,
}: PriceRangeProps) {
  const [val, setVal] = useState<RangeValue>(initalRangeValues);
  const { t } = useLocale();

  return (
    <div className="w-full">
      <div className="px-3 py-4">
        {/* This chart is symbolic according to figma design. */}
        <div className="-mb-1.5">
          <Image
            src={MiniChart}
            alt="Mini Chart for filter"
            className="w-full"
          />
        </div>
        <RangeSlider
          isMultiple
          value={val}
          min={rangeValues.start}
          max={rangeValues.end}
          onChange={(values) => {
            const currentValues = values as RangeValue;
            setVal(currentValues);
          }}
          onChangeComplete={(currentValues) => {
            onChange(currentValues as RangeValue);
          }}
        />
      </div>
      <div className="grid h-[40px] grid-cols-2 overflow-hidden rounded-lg border border-gray-200 shadow">
        <div className="flex items-center justify-start pl-3 text-sm font-medium text-gray-800">
          {PriceManager({
            currency: currencySymbol,
            value: val.start || 1,
            currencyDisplay: currencySymbol === "TRY" ? "code" : "symbol",
          })}
        </div>
        <div className="flex items-center justify-end pr-3 text-sm font-medium text-gray-800">
          {PriceManager({
            currency: currencySymbol,
            value: val.end || 2,
            currencyDisplay: currencySymbol === "TRY" ? "code" : "symbol",
          })}
        </div>
      </div>
      <Button
        className={cn(
          "w-full select-none text-center text-sm font-medium leading-tight",
          val.start === rangeValues.start && val.end === rangeValues.end
            ? "text-gray-400"
            : "text-primary-500",
        )}
        disabled={
          val.start === rangeValues.start && val.end === rangeValues.end
        }
        onClick={() => {
          setVal({ ...rangeValues });
          onChange({
            start: rangeValues.start,
            end: rangeValues.end,
          } as RangeValue);
        }}
        type="button"
      >
        {t("Reset Selection")}
      </Button>
    </div>
  );
}

export default PriceRange;