<commit_before>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} /><commit_msg>add start of percentage<commit_after>import React from 'react';
import {
  PageHeader,
  Button,
  ButtonGroup,
  ButtonToolbar,
  Pager,
  Alert,
  ProgressBar,
} 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 TimerProgressBar({ props }) {
  const minutesInSeconds = props.minutes * 60;
  const timeInSeconds = minutesInSeconds + props.seconds;
  const onePercent = 1500 / 100;
  const percentage = Math.floor(timeInSeconds / onePercent);

  return (
    <ProgressBar
      bsStyle="success"
      now={100 - percentage}
      label={`${100 - percentage}%`}
      active
    />
  );
}

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} />
      <TimerProgressBar props={props} />
      <ButtonToolbar>
        <Pager>
          <StartTimerButton onStartTimer={props.onStartTimer} />
          <StopTimerButton onStopTimer={props.onStopTimer} />
          <ResetTimerButton onResetTimer={props.onResetTimer} />
{'fraction_non_alphanumeric': 0.12778335005015046, 'fraction_numerical': 0.009027081243731194, 'mean_word_length': 3.350785340314136, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3272398', 'n_tokens_mistral': 1613, 'n_tokens_neox': 1533, 'n_words': 355}