import { PeriodOfDay } from '@rpg-engine/shared';
import React from 'react';
import Draggable from 'react-draggable';
import styled from 'styled-components';
import { uiFonts } from '../../constants/uiFonts';
import { DayNightPeriod } from './DayNightPeriod/DayNightPeriod';

import ClockWidgetImg from './img/clockwidget.png';

export interface IClockWidgetProps {
  onClose?: () => void;
  TimeClock: string;
  periodOfDay: PeriodOfDay;
  scale?: number;
}

export const TimeWidget: React.FC<IClockWidgetProps> = ({
  onClose,
  TimeClock,
  periodOfDay,
  scale,
}) => {
  return (
    <Draggable
      scale={scale}
      cancel=".time-widget-close,.time-widget-container,.time-widget-container *"
    >
      <WidgetContainer>
        <CloseButton onPointerDown={onClose} className="time-widget-close">
          X
        </CloseButton>
        <DayNightContainer className="time-widget-container">
          <DayNightPeriod periodOfDay={periodOfDay} />
        </DayNightContainer>
        <Time>{TimeClock}</Time>
      </WidgetContainer>
    </Draggable>
  );
};

const WidgetContainer = styled.div`
  background-image: url(${ClockWidgetImg});
  background-size: 10rem;
  background-repeat: no-repeat;
  width: 10rem;
  position: absolute;
  height: 100px;
`;

const Time = styled.div`
  top: 0.75rem;
  right: 0.5rem;
  position: absolute;
  font-size: ${uiFonts.size.small};
  color: white;
`;

const CloseButton = styled.p`
  position: absolute;
  top: -0.5rem;
  margin: 0;
  right: -0.2rem;
  font-size: ${uiFonts.size.small} !important;
  z-index: 1;
`;

const DayNightContainer = styled.div`
  margin-top: -0.3rem;
  margin-left: -0.3rem;
`;
