/** @format */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';

import styles from './index.less';

interface HumidityProps {
  size?: Record<string, any>;
  city: Record<string, any>;
  [key: string]: any;
}
const Humidity = (props: HumidityProps) => {
  const [humidity, setHumidity] = useState();
  const { size, city = '杭州市', boxStyle, labelStyle, valueStyle } = props;

  const styleBase = {
    height: 37,
    width: 100,
  };
  const labelBase = {
    fontSize: 12,
    color: '#fff',
    lineHeight: 1,
    marginBottom: 2,
  };
  const valueBase = {
    fontSize: 18,
    color: '#fff',
    lineHeight: 1,
  };
  const style = _.merge(styleBase, size, boxStyle);
  const labelStyles = _.merge(labelBase, labelStyle);
  const valueStyles = _.merge(valueBase, valueStyle);

  useEffect(() => {
    fetch(
      `https://restapi.amap.com/v3/weather/weatherInfo?key=abb419c77c3a2e1292893441fde0ae87&extensions=base&city=${city}`,
    )
      .then(res => res.json())
      .then(res => {
        if (res && res.lives && res.lives[0]) {
          setHumidity(res.lives[0].humidity);
        }
      });
  }, [city]);

  return (
    <div style={style} className={styles.shidu}>
      <div>
        <p style={labelStyles}>湿度</p>
        <p style={valueStyles}> {humidity}%</p>
      </div>
    </div>
  );
};

export default Humidity;