/** @format */

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

import { Container } from './styled';

interface TemperatureProps {
  size?: Record<string, any>;
  city: Record<string, any>;
  [key: string]: any;
}
const Temperature = (props: TemperatureProps) => {
  const {
    size,
    city = '杭州市',
    img,
    isShowTemperature = false,
    isShowHumidity = false,
    isShowLogo = true,
  } = props;
  const [temperature, setTemperature] = useState();
  const [humidity, setHumidity] = useState();
  const [time, setTime] = useState(moment().format('HH:mm:ss'));
  const defaultImg =
    'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/952f4df1-1330-425e-9b23-33c5fadfb3a5.png';

  const timerBase = {
    color: '#fff',
    fontSize: 18,
    lineHeight: 1,
    fontFamily: 'DINAlternate-Bold',
  };

  const dateBase = {
    color: '#fff',
    fontSize: 12,
    lineHeight: 1,
    fontFamily: 'Arial',
  };
  const labelBase = {
    fontSize: 12,
    color: '#fff',
    lineHeight: 1,
    marginBottom: 2,
    fontFamily: 'DINAlternate-Bold',
  };
  const valueBase = {
    fontSize: 18,
    color: '#fff',
    lineHeight: 1,
    fontFamily: 'Microsoft Yahei',
  };
  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]) {
          setTemperature(res.lives[0].temperature);
          setHumidity(res.lives[0].humidity);
        }
      });
  }, [city]);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(moment().format('HH:mm:ss'));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <Container style={size}>
      {isShowLogo ? (
        <div className="imgbox">
          <img src={img || defaultImg} />
        </div>
      ) : null}
      {isShowHumidity ? (
        <div className="shidu">
          <div>
            <p style={labelBase}>湿度</p>
            <p style={valueBase}> {humidity}%</p>
          </div>
        </div>
      ) : null}
      {isShowTemperature ? (
        <div className="wendu">
          <img
            src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/4bf54cf9-5264-4133-887d-2eade7ac64b2.png"
            alt=""
            className="icon"
          />
          <span> {temperature}℃</span>
        </div>
      ) : null}
      <div className="time">
        <div>
          <p className="timer" style={timerBase}>
            {time}
          </p>
          <p className="date" style={dateBase}>
            {moment().format('YYYY.MM.DD')}
          </p>
        </div>
      </div>
    </Container>
  );
};

export default Temperature;