import React, { useState } from "react";
import classNames from "classnames";
import { StyledStopwatch, StyledStopwatchCenterWrapper, StyledTrigger } from "./Stopwatch.style";
import { EditableHours } from "../EditableHours";
import { IconButton } from "../IconButton";
import { CloseIcon, NoteIcon, PauseSmallIcon, PlaySmallIcon, UploadIcon } from "../Icons";
export const Stopwatch = () => {
  const [isActive, setIsActive] = useState(false);
  return /*#__PURE__*/React.createElement(StyledStopwatch, {
    className: classNames("", {
      "tw-bg-red-100": isActive,
      "tw-bg-gray-100": !isActive
    })
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => setIsActive(!isActive),
    className: classNames("tw-shadow-none hover:tw-shadow-none", {
      "tw-bg-red-400 hover:bg-red-500": isActive,
      "tw-bg-indigo-400 hover:bg-indigo-400": !isActive
    })
  }, !isActive ? /*#__PURE__*/React.createElement(PlaySmallIcon, null) : /*#__PURE__*/React.createElement(PauseSmallIcon, null)), /*#__PURE__*/React.createElement(StyledStopwatchCenterWrapper, null, /*#__PURE__*/React.createElement(EditableHours, {
    value: "00:00"
  }), /*#__PURE__*/React.createElement(IconButton, {
    size: "small",
    variant: "tertiary"
  }, /*#__PURE__*/React.createElement(NoteIcon, {
    width: 20
  })), true && /*#__PURE__*/React.createElement(IconButton, {
    size: "small",
    variant: "tertiary"
  }, /*#__PURE__*/React.createElement(CloseIcon, {
    width: 20
  }))), /*#__PURE__*/React.createElement(StyledTrigger, {
    onClick: () => setIsActive(!isActive)
  }, /*#__PURE__*/React.createElement(UploadIcon, null)));
};
Stopwatch.displayName = "Stopwatch";
//# sourceMappingURL=Stopwatch.js.map