import { Slider } from "antd";
import { useTranslation } from "react-i18next";

const CourtesyCarFuelComponent = ({ ref, ...props }) => {
  const { t } = useTranslation();

  const marks = {
    0: {
      style: {
        color: "#f50"
      },
      label: <strong>{t("courtesycars.labels.fuel.empty")}</strong>
    },
    13: t("courtesycars.labels.fuel.18"),
    25: t("courtesycars.labels.fuel.14"),
    38: t("courtesycars.labels.fuel.38"),
    50: t("courtesycars.labels.fuel.12"),
    63: t("courtesycars.labels.fuel.58"),
    75: t("courtesycars.labels.fuel.34"),
    88: t("courtesycars.labels.fuel.78"),
    100: {
      style: {
        color: "#008000"
      },
      label: <strong>{t("courtesycars.labels.fuel.full")}</strong>
    }
  };

  return (
    <Slider
      ref={ref}
      marks={marks}
      step={null}
      style={{ marginLeft: "2rem", marginRight: "2rem" }}
      {...props}
      tooltip={{
        formatter: (value) => {
          switch (value) {
            case 0:
              return t("courtesycars.labels.fuel.empty");
            case 13:
              return t("courtesycars.labels.fuel.18");
            case 25:
              return t("courtesycars.labels.fuel.14");
            case 38:
              return t("courtesycars.labels.fuel.38");
            case 50:
              return t("courtesycars.labels.fuel.12");
            case 63:
              return t("courtesycars.labels.fuel.58");
            case 75:
              return t("courtesycars.labels.fuel.34");
            case 88:
              return t("courtesycars.labels.fuel.78");
            case 100:
              return t("courtesycars.labels.fuel.full");
            default:
              return value;
          }
        }
      }}
    />
  );
};
export default CourtesyCarFuelComponent;
