import * as React from 'react';
import { formatWeatherDate, formatWeatherNumber } from './weatherFormat';
import { IWeatherDay } from './weatherTypes';
import { WeatherPhenomena } from './WeatherPhenomena';
import { WEATHER_TEXTS } from './texts';
import styles from './WeatherPage.module.scss';

const TEXTS = WEATHER_TEXTS.days;
const COLUMNS = TEXTS.columns;

interface Props {
  days: IWeatherDay[];
}

/** «Погода по дням»: наблюдения метеостанции за каждый день периода. */
export const WeatherDaysTable: React.FC<Props> = ({ days }) => {
  if (days.length === 0) {
    return <div className={styles.state}>{TEXTS.empty}</div>;
  }

  return (
    <div className={styles.tableWrap}>
      <table className={styles.table}>
        <thead>
          <tr>
            <th>{COLUMNS.date}</th>
            <th className={styles.num}>{COLUMNS.observations}</th>
            <th className={styles.num}>{COLUMNS.tempMin}</th>
            <th className={styles.num}>{COLUMNS.tempMax}</th>
            <th className={styles.num}>{COLUMNS.wind}</th>
            <th className={styles.num}>{COLUMNS.gust}</th>
            <th className={styles.num}>{COLUMNS.precipitation}</th>
            <th>{COLUMNS.phenomena}</th>
          </tr>
        </thead>
        <tbody>
          {days.map((day) => (
            <tr key={day.date}>
              <td className={styles.nowrap}>{formatWeatherDate(day.date)}</td>
              <td className={styles.num}>{formatWeatherNumber(day.observations)}</td>
              <td className={styles.num}>{formatWeatherNumber(day.temp_min)}</td>
              <td className={styles.num}>{formatWeatherNumber(day.temp_max)}</td>
              <td className={styles.num}>{formatWeatherNumber(day.wind_max)}</td>
              <td className={styles.num}>{formatWeatherNumber(day.gust_max)}</td>
              <td className={styles.num}>{formatWeatherNumber(day.precipitation)}</td>
              <td>
                <WeatherPhenomena phenomena={day.weather} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};