import React from 'react';
import { assingAirQuality } from '../utils';
import { AqiData } from '../types';
import { TextFormat } from '@vixoniccom/modules';
import { FormattedText } from './FormattedText';

interface Props {
  data: AqiData;
  format: {
    cardWidth?: number;
    cardHeight?: number;
    cardGap?: number;
    aqiFormat?: TextFormat.Value;
    stationFormat?: TextFormat.Value;
    qualityFormat?: TextFormat.Value;
    positionCard?: string;
  };
}

export const Card: React.FunctionComponent<Props> = ({ data, format }) => {
  const { color, quality } = assingAirQuality(data?.aqi || -1)
  const city = data.station === "Estación desconocida" ? data.station : data.city

  return (
    <div style={{
      display: 'flex',
      width: `${format.cardWidth || 300}px`,
      height: `${format.cardHeight || 200}px`,
      flexDirection: `${format.positionCard === 'vertical' ? 'column' : 'row'}`,
      alignItems: `${format.positionCard === 'horizontal' ? 'center' : ''}`,
      backgroundColor: color,
      borderRadius: "10px"
    }}>
      {(data?.aqi) && (
        <div style={{
          textAlign: `${format.aqiFormat?.alignment?.horizontal || 'left'}`,
          padding: `${format.cardGap || 2}rem`
        }}>
          <FormattedText text={String(data?.aqi)} format={format.aqiFormat} />
        </div>
      )}
      <div style={{
        textAlign: `${format.stationFormat?.alignment?.horizontal || 'left'}`,
        padding: `${format.cardGap || 2}rem`,
      }}>
        <FormattedText text={city} format={format.stationFormat} />
      </div>
      <div style={{
        textAlign: `${format.qualityFormat?.alignment?.horizontal || 'left'}`,
        padding: `${format.cardGap || 2}rem`,
        marginTop: '1rem'
      }}>
        <FormattedText text={data?.aqi ? quality : ''} format={format.qualityFormat} />
      </div>
    </div>
  )
}
