import React from 'react';
import PropTypes from 'prop-types'
import { Button, Image, Header } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import './viewHeader.css';

const propTypes = {
  view: PropTypes.string.isRequired,
  dateService: PropTypes.object.isRequired,
  displayYear: PropTypes.number.isRequired,
  displayMonth: PropTypes.number.isRequired,
  displayDay: PropTypes.number.isRequired,

};

const defaultProps = {};

const ViewHeader = ({ view, dateService, displayYear, displayMonth, displayDay }) => {

  return (
    <div className="centered">
      <Link to={urlPrevStr(view, displayYear, displayMonth, displayDay, dateService)} >
        <Button basic compact >
          <Image className="arrow" size="mini" src={require('./img/arrow-left.svg')} alt="<" />
        </Button>
      </Link>

      <Header size="small" className="month-year">
        {generateHeaderText(view, displayYear, displayMonth, displayDay, dateService)}
        {/* {dateService.monthNamesLong[displayMonth]}
        <span>&#32;</span>
        {displayYear} */}
      </Header>

      <Link to={urlNextStr(view, displayYear, displayMonth, displayDay, dateService)} >
        <Button basic compact >
          <Image className="arrow" size="mini" src={require('./img/arrow-right.svg')} alt=">" />
        </Button>
      </Link>
    </div>
  )
};

function generateHeaderText(view, displayYear, displayMonth, displayDay, dateService) {
  //Our indexing is causing complexity here, with the +1 -1 stuff
  //JS indexes Sunday to 0, we're using Monday as 0
  //JS indexes months started at 0, we're using 1 in the display of the URL, 0 elsewhere
  const monthStr = dateService.monthNamesLong[displayMonth];
  const dayStr = dateService.dayNamesLong[new Date(displayYear, displayMonth, displayDay).getDay() - 1] || 'Sunday';
  console.log(displayYear, displayMonth, displayDay);
  console.log(new Date(displayYear, displayMonth, displayDay));
  if (view === 'month') {
    return `${monthStr} ${displayYear}`
  } else if (view === 'week') {
    return `week`
  } else if (view === 'day') {
    return `${dayStr}, ${monthStr} ${displayDay} ${displayYear}`
  }
}

//These two functin could be merged into one, and then passed in a flag for 'next' or 'prev'
//Not doing that for now, I think it'll make testing them harder, and might result in a big messy function
function urlPrevStr(view, displayYear, displayMonth, displayDay, dateService) {
  let yearStr, monthStr, dayStr;
  if (view === 'month') {
    //Paths/links to the next/prev month need to be dynamically generated
    const prevMonthObj = dateService.getPrevMonth(displayYear, displayMonth);
    [yearStr, monthStr] = [prevMonthObj.year, prevMonthObj.month]
    dayStr = displayDay;
  } else if (view === 'week') {

  } else if (view === 'day') {

  }
  return `/${view}/${yearStr}/${monthStr + 1}/${dayStr}`;
}
function urlNextStr(view, displayYear, displayMonth, displayDay, dateService) {
  let yearStr, monthStr, dayStr;
  if (view === 'month') {
    const nextMonthObj = dateService.getNextMonth(displayYear, displayMonth);
    [yearStr, monthStr] = [nextMonthObj.year, nextMonthObj.month]
    dayStr = displayDay;
  } else if (view === 'week') {

  } else if (view === 'day') {
    const nextDayObj = dateService.getNextDay(displayYear, displayMonth, displayDay);
    [yearStr, monthStr, dayStr] = [nextDayObj.year, nextDayObj.month, nextDayObj.day];
  }

  return `/${view}/${yearStr}/${monthStr + 1}/${dayStr}`;
}

ViewHeader.propTypes = propTypes;

ViewHeader.defaultProps = defaultProps;

export default ViewHeader;

@@ -1834,126 +1834,8 @@
 y';%0A
-  console.log(displayYear, displayMonth, displayDay);%0A  console.log(new Date(displayYear, displayMonth, displayDay));%0A
   if
@@ -2691,24 +2691,196 @@
 == 'day') %7B%0A
+    const prevDayObj = dateService.getPrevDay(displayYear, displayMonth, displayDay);%0A    %5ByearStr, monthStr, dayStr%5D = %5BprevDayObj.year, prevDayObj.month, prevDayObj.day%5D;
 %0A  %7D%0A  retur

FIX ViewHeader now working properly for month and day, still need to do week