import React from 'react';
import {
  PageHeader,
  Button,
  ButtonGroup,
  ButtonToolbar,
  Pager,
  Alert,
} from 'react-bootstrap';

function TimerHeader() {
  return (
    <PageHeader>
      Pomodoro Timer
    </PageHeader>
  );
}

// TODO: function is way too long need to component it
function displayTime(timeInSeconds) {
  if (timeInSeconds === 0) {
    return <Alert bsStyle="success">GOGO</Alert>;
  }
  if (timeInSeconds % 60 === 0) {
    return `${timeInSeconds / 60}:00`;
  }
  const minutes = Math.floor(timeInSeconds / 60);
  const seconds = timeInSeconds % 60;
  return `${minutes.toFixed(0)}:${seconds}`;
}

function TimerCounter({ props }) {
  console.log('min, sec: ', props.minutes, props.seconds);
  const minutesInSeconds = props.minutes * 60;
  const timeInSeconds = minutesInSeconds + props.seconds;
  return (
    <div>
      {displayTime(timeInSeconds)}
    </div>
  );
}

function StartTimerButton({ onStartTimer }) {
  return (
    <Button bsStyle="success" onClick={onStartTimer}>
      Start Timer
    </Button>
  );
}

function StopTimerButton({ onStopTimer }) {
  return (
    <Button bsStyle="warning" onClick={onStopTimer}>
      Stop Timer
    </Button>
  );
}

function ResetTimerButton({ onResetTimer }) {
  return (
    <Button bsStyle="danger" onClick={onResetTimer}>
      Reset Timer
    </Button>
  );
}

function RestartPomodoroButton({ onRestartPomodoro }) {
  return (
    <Button bsStyle="info" onClick={onRestartPomodoro}>
      Restart Pomodoro
    </Button>
  );
}

function StartSmallBreakButton({ onStartSmallBreak }) {
  return (
    <Button bsStyle="info" onClick={onStartSmallBreak}>
      Start Small Break
    </Button>
  );
}

function StartLongBreakButton({ onStartLongBreak }) {
  return (
    <Button bsStyle="info" onClick={onStartLongBreak}>
      Start Long Break
    </Button>
  );
}

// is it correct to pass props like this?
export default function Timer(props) {
  return (
    <div>
      <TimerHeader />
      <TimerCounter props={props} />
      <ButtonToolbar>
        <Pager>
          <StartTimerButton onStartTimer={props.onStartTimer} />
          <StopTimerButton onStopTimer={props.onStopTimer} />
          <ResetTimerButton onResetTimer={props.onResetTimer} />
        </Pager>
        <ButtonGroup>
          <Pager>
            <RestartPomodoroButton
              onRestartPomodoro={props.onRestartPomodoro}
            />
            <StartSmallBreakButton
              onStartSmallBreak={props.onStartSmallBreak}
            />
            <StartLongBreakButton onStartLongBreak={props.onStartLongBreak} />
          </Pager>
        </ButtonGroup>
      </ButtonToolbar>
    </div>
  );
}

@@ -103,16 +103,31 @@
  Alert,%0A
+  ProgressBar,%0A
 %7D from '
@@ -900,32 +900,417 @@
  %3C/div%3E%0A  );%0A%7D%0A%0A
+function TimerProgressBar(%7B props %7D) %7B%0A  const minutesInSeconds = props.minutes * 60;%0A  const timeInSeconds = minutesInSeconds + props.seconds;%0A  const onePercent = 1500 / 100;%0A  const percentage = Math.floor(timeInSeconds / onePercent);%0A%0A  return (%0A    %3CProgressBar%0A      bsStyle=%22success%22%0A      now=%7B100 - percentage%7D%0A      label=%7B%60$%7B100 - percentage%7D%25%60%7D%0A      active%0A    /%3E%0A  );%0A%7D%0A%0A
 function StartTi
@@ -2363,24 +2363,24 @@
 erHeader /%3E%0A
-
       %3CTimer
@@ -2400,24 +2400,65 @@
 =%7Bprops%7D /%3E%0A
+      %3CTimerProgressBar props=%7Bprops%7D /%3E%0A
       %3CButto

add start of percentage