import React, { FC, useEffect, useState } from "react";
import { Label } from "../Label";
import { Badge } from "../Badge";
import {
  getAbbvTimezone,
  GetFormatForMoment,
  getFormattedDateByTimeZone,
} from "../../tools";
import "./style.scss";
import { TimezoneProps } from "./types";
import { Tooltip } from "..";

export const Timezone: FC<TimezoneProps> = ({
  date,
  timezone = "Argentina/Buenos_Aires",
  dateFormat = "d/m/Y",
  timeFormat,
  onlyDate = false
}) => {
  const [newDate, setNewDate] = useState("");
  const [abbr, setAbbr] = useState("");


  useEffect(() => {
    let newFormat: string = GetFormatForMoment(dateFormat);

    if (timeFormat) {
      newFormat = `${newFormat} ${timeFormat}`;
    }
    const formatDate = getFormattedDateByTimeZone(date, timezone, newFormat);

    const abbvTimezone = getAbbvTimezone(timezone);

    setAbbr(`, ${abbvTimezone}`);

    setNewDate(formatDate || date.toString());
  }, [date, timezone, dateFormat, timeFormat]);


  return (
    <div className="gtc-timezone">
      <Label>{newDate}</Label>
      {!onlyDate && 
        <Tooltip title={timezone}>
          <div>
            <Label>{abbr}</Label>
          </div>
        </Tooltip>
      }
    </div>
  );
};
