import React from "react";
import styled from "styled-components";
import { CircularProgressbarWithChildren, buildStyles } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
import { FaPen } from "react-icons/fa";
import { HiClock } from "react-icons/hi";
import { CgNotes } from "react-icons/cg";
import ReactTooltip from "react-tooltip";
import { useDispatch } from "react-redux";
import { focusOnTask } from "../../containers/taskBoard/taskBoardSlice";

const FocussedTaskDiv = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background-color: #fabb18;
    width: 100%;
    height: 100%;
    border-radius: 20px;
`;

const FocussedTaskPlayer = styled.div`
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 55%;
    border-radius: 10px;
    /* background-color: #FABB18; */
    /* box-shadow: 0 2px 10px rgba(166, 173, 201, 0.5);
    -webkit-box-shadow: 0 2px 10px rgba(166, 173, 201, 0.5); */
`;

const FocussedTaskContent = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    height: 30%;
    width: 90%;
    max-width: 376px;
    border-radius: 10px;
    border: 3px solid black;
    word-wrap: break-word;
    background-color:${p=>p.theme.backgroundSecondary};
    color:${p=>p.theme.primaryText};
    svg {
        font-size: 3em;
    }
`;

const FocussedTaskTimer = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 50%;
    /* background-color: #df1aa1; */
`;

const CountdownTimerDiv = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 85%;
    background-color:${p=>p.theme.type==="l"?"#FFF":"#FFE39E"};
    color:#000;
    -webkit-box-shadow: 0 2px 10px rgba(166, 173, 201, 0.2);
    box-shadow: 0 2px 10px rgba(166, 173, 201, 0.2);
    border-radius: 50%;
    font-weight: bold;
    svg{
        font-size:1.6em;
    }
`;

const FocussedTaskController = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 90%;
    width: 30%;
    /* background-color: #f1f7dd; */
`;

const PlayPauseButtonDiv = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    margin: 10px 20px;
    svg {
        color: #fabb18;
        font-size: 0.9em;
    }
`;

const HelpPickTaskContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
`;

const HelpPickTaskLabel = styled.div`
    display: flex;
    align-items: center;
    /* flex-direction: column; */
    justify-content: center;
    width: 45%;
    height: 95%;
    
    p {
        margin: 0 3px;
        font-size: 0.9em;
        font-weight: bold;
        /* color: #fabb18; */
    }
    svg {
        font-size: 1.6em;
    }
    /* background-color: cyan; */
`;

const HelpPickTaskButtonBox = styled.div`
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    width: 40%;
    height: 95%;
    /* background-color: lightblue; */
`;

const HelpPickTaskButton = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40%;
    border-radius: 5px;
    border: 2px solid #fabb18;
    span {
        font-size: 0.7em;
        font-weight: bold;
    }
    cursor: pointer;
    background-color:${p=>p.theme.backgroundSecondary};
    color:${p=>p.theme.primaryText};
    &:hover {
        color:${p=>p.theme.secondaryText};
        background-color:${p=>p.theme.highlight};
    }
`;

export function EmptyFocusBox({ noTasks,noChoice }) {
    const dispatch = useDispatch();

    return (
        <FocussedTaskDiv>
            <FocussedTaskPlayer>
                <FocussedTaskTimer>
                    <div style={{ width: 100, height: 100 }}>
                        <CircularProgressbarWithChildren
                            value={100}
                            styles={buildStyles({
                                pathColor: "#121212",
                                trailColor: "#F0F8FF",
                            })}
                            strokeWidth={9}
                        >
                            <CountdownTimerDiv>
                                <HiClock/>
                            </CountdownTimerDiv>
                        </CircularProgressbarWithChildren>
                    </div>
                </FocussedTaskTimer>

                <FocussedTaskController>
                    <PlayPauseButtonDiv data-tip="" data-for="Create">
                        <FaPen />
                        <ReactTooltip id="Create" getContent={() => (noTasks ? "No task" : "Focus on task")} />
                    </PlayPauseButtonDiv>
                </FocussedTaskController>
            </FocussedTaskPlayer>
            <FocussedTaskContent>
                {(noChoice || noTasks) ? (
                    <CgNotes />
                ) : (
                    <HelpPickTaskContainer>
                        <HelpPickTaskLabel>
                            <CgNotes />
                            <p>Focus on</p>
                        </HelpPickTaskLabel>

                        <HelpPickTaskButtonBox>
                            <HelpPickTaskButton onClick={() => dispatch(focusOnTask("smallest"))}>
                                <span>Smallest task</span>
                            </HelpPickTaskButton>
                            <HelpPickTaskButton onClick={() => dispatch(focusOnTask("largest"))}>
                                <span>Biggest task</span>
                            </HelpPickTaskButton>
                        </HelpPickTaskButtonBox>
                    </HelpPickTaskContainer>
                )}
            </FocussedTaskContent>
        </FocussedTaskDiv>
    );
}