import React, { useState, useEffect } from "react";
import styled from "styled-components";
import moment from "moment";
import Input from "../Input";

const HomeTodo = styled.div`
  display: flex;
  flex-direction: column;
`;

const DateBox = styled.div`
  display: flex;
  flex-direction: column;
  input {
    margin-top: 20px;
    background: none;
    border-bottom: 1px solid;
    border-radius: 0px;
    border-color: white;
  }
`;

const DateSpan = styled.span`
  font-size: ${(props) => {
    if (props.className === "Clock") return "85px";
    if (props.className === "Title") return "30px";
  }};
  color: white;
  text-align: center;
  &:not(:last-child) {
    margin-bottom: 20px;
  }
`;

export default () => {
  const [date, setDate] = useState(moment().format("h:mm:ss"));

  useEffect(() => {
    let timer = setInterval(() => tick(), 1000);
    return function cleanUp() {
      clearInterval(timer);
    };
  });

  function tick() {
    setDate(moment().format("h:mm:ss"));
  }

  return (
    <HomeTodo>
      <DateBox>
        <DateSpan className="Clock">{date}</DateSpan>
        <DateSpan className="Title">Enter Todo list</DateSpan>
        <Input placeholder={""} />
      </DateBox>
    </HomeTodo>
  );
};