import { WeatherWidgetIcon } from "./weather-widget-icon";

import IconHumidity from "./icons/det_humidity.svg";
import IconWind from "./icons/det_wind.svg";
import { WeatherDayRow, WeatherWidgetData } from "./weather.interface";

const Weekdays = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];

const WRow = ({ temperature, weekday, condition }: WeatherDayRow) => (
  <div
    style={{
      display: "flex",
      marginBottom: "8px",
    }}
  >
    <div
      style={{
        width: 16,
        height: 16,
      }}
    >
      <WeatherWidgetIcon icon={condition} size={16} />
    </div>
    <div style={{ marginLeft: 8, minWidth: 22 }} children={Weekdays[weekday]} />
    <div style={{ marginLeft: 8 }} children={`${temperature ?? "--"}°`} />
  </div>
);

export function WeatherWidgetRight({
  forecasts,
  weatherInfo,
}: WeatherWidgetData) {
  const wd = new Date().getDay();
  return (
    <div
      style={{
        textAlign: "center",
        width: "50%",
        fontSize: 18,
        lineHeight: "21px",
      }}
    >
      <div
        style={{
          borderBottom: "1px solid #999",
          marginBottom: "8px",
          marginTop: "8px",
        }}
      >
        {[...forecasts].slice(0, 3).map((d, idx) => (
          <WRow key={idx} {...d?.weatherInfo} weekday={(wd + idx + 1) % 7} />
        ))}
      </div>

      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginBottom: 8,
        }}
      >
        <IconHumidity />
        <b children={weatherInfo?.humidity ?? "--"} />%
      </div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <IconWind />
        <b children={weatherInfo?.windSpeed ?? "--"} />
        &nbsp;м/с
      </div>
    </div>
  );
}