import React, {useEffect, useState} from 'react';
import styles from "./main.module.scss";
import {getCall} from "../../api/getCall";

const TOKEN = process.env.REACT_APP_TOKEN
const Main = () => {
  const [quote,
    setQuote] = useState("Loading...")
  const [theme,
    setTheme] = useState();
  useEffect(() => {
    getCall({path: "https://timezoneapi.io/api/ip/?token=" + TOKEN}).then((result) => {
      var s = new Date().toLocaleString(undefined, {timeZone: result.data.data.timezone.id});
      const hours = s
        .split(", ")[1]
        .split(":")[0];
        if(hours >= 20 && hours<=5 ){
            setTheme(false)
        }else{
            setTheme(true)
        }

    }).catch((error) => {
      console.log(error)
    });
    getCall({path: "https://api.quotable.io/random"}).then((item) => setQuote(item.data.content)).catch((error) => {
      console.log(error)
    })
  }, [])

  const handleClick = () => {
    setQuote("Loading...")
    getCall({path: "https://api.quotable.io/random"}).then((item) => setQuote(item.data.content)).catch((error) => {
      console.log(error)
    })
  }
  if(!theme){
      return(null)
  }else{
  return (
    <section
      className={[
      styles.main,
      (theme
        ? styles.day_mode
        : styles.night_mode)
    ].join(' ')}>
        <div>
        <h1
        className={[
        styles.main_title,
        (theme
          ? styles.day_mode_title
          : styles.night_mode_title)
      ].join(" ")}>Quote Generator</h1>
      <span>Theme is decided as per the local time.<br/> Theme is {theme ? "day theme" : "night theme"} supports all country</span>
        </div>
      <div
        className={[
        styles.quote_generator,
        (theme
          ? styles.night_mode
          : styles.day_mode)
      ].join(" ")}>
        {quote}
      </div>
      <button
        className={[
        styles.button,
        (theme
          ? styles.night_mode
          : styles.day_mode)
      ].join(' ')}
        onClick={handleClick}>Generate Quote</button>
    </section>
  )
}
}

export default Main

.main{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    &_title{
        font-size: 2.5em;
        text-align: center;
    }
    .quote_generator{
        min-height:300px;
        width: 70%;
        margin: 0 auto;
        border-radius: 16px;
        padding: 20px;
        font-size: 2em;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width:768px){
            width: 100%;
            padding: 20px;
        }
        @media screen and (max-width:556px){
            padding: 10px;
        }
    }
    span{
        color: red;
        font-style: italic;
        font-weight: 100;
        font-size: 0.8em;
        display: block;
        text-align: center;
    }
    .button{
        height: 50px;
        border: none;
        padding: 10px;
        border-radius: 0.5em;
        font-size: 1em;
        cursor: pointer;
    }
}

.day_mode{
    background-color: rgb(235, 235, 235);
    color: #173f5f;
}

.night_mode{
    color: rgb(235, 235, 235);
    background-color: #173f5f;
}

.day_mode_title{
    color: #173f5f;
}

.night_mode_title{
    color: rgb(235, 235, 235);
}

import axios from "axios"

export const getCall = async({path}) => {
  return axios
    .get(`${path}`)
}