import * as React from 'react';
import styled from 'styled-components';

import TextHelper from '../../TextHelper';

import { DAYS_OF_THE_WEEK } from '../utils/days';
import { Months } from '../utils/months.enum';
import { SEASONS } from '../utils/seasons';

interface IProps {
  dayWeek: number;
  day: number;
  month: number;
  year: number;
}

const Wrapper = styled.div`
  background-color: #f0f0f0;
  text-align: center;
  padding: 41px;

  .date {
    text-transform: uppercase;
    font-family: ${TextHelper.fontVariant('bold')};
    font-size: 25px;
    line-height: 33px;
    margin: 16px 0 0;
  }

  @media screen and (min-width: 768px) {
    float: left;
    max-width: 280px;
    height: 100%;
  }
`;

const Season = styled.h3`
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-family: ${TextHelper.fontVariant('regular')};
  font-weight: normal;

  @media screen and (min-width: 768px) {
    flex-direction: column-reverse;
  }

  svg {
    margin-right: 20px;

    @media screen and (min-width: 768px) {
      width: 82px;
      height: 117px;
      margin-right: 0;
      margin-top: 10px;
    }
  }
`;

export default ({ dayWeek, day, month, year }: IProps) => (
  <Wrapper>
    <p>{DAYS_OF_THE_WEEK[dayWeek]},</p>
    <h2 className='date'>{day} de {Months[month]} de {year}</h2>
    { SEASONS
      .filter(season => season.includeMonths.some(e => e === month))
      .map(season => (
        <Season key={Math.random()}>{season.icon} <span>{season.name}</span></Season>
      )
    )}
  </Wrapper>
);