classTabs

import React, { useState } from 'react';
import propTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { useStoreState } from 'easy-peasy';
import {returnDateStatus} from 'utils/dateUtils.js';

import {
  Tabs
} from 'widget';

import TimeSlotButtons from './TimeSlotButtons';
import { tabHeaders, todayDateFormatHeader } from './tabConstants';

import classstyles from './ClassTabs.module.scss';

const ClassTabs = props => {
  const { serverTime, clientTime } = useStoreState(state => state.app);
  const defaultTabHeader = todayDateFormatHeader(serverTime, clientTime, props.slotData);
  const [selectedTab, onTabSelect] = useState(defaultTabHeader);
  const tabHeads = tabHeaders(serverTime, clientTime, props.slotData);
  // console.log(props.slotData);
  // console.log(selectedTab);

  if (!props.slotData.has(selectedTab.name)) {
    //console.log(selectedTab.name);
    selectedTab.name = props.slotData.keys().next().value;
    selectedTab.value = returnDateStatus(serverTime,clientTime,selectedTab.name);
    //just set value here...value will be the day corresponding to selectedTab.name;
    //console.log("Updated: ", selectedTab);
  }

  const onTabChange = value => {
    //console.log("Triggered");
    const data = tabHeads.filter(tabHeader => tabHeader.value === value)[0];
    onTabSelect(data);
  };

  const selectSlot = slot => {
    props.handleSlot(slot);
  };

  const useStyles = makeStyles(theme => ({
    root: {
      '& .MuiTabs-flexContainer': {
        paddingLeft: '0px',
      },
      '& .MuiButtonBase-root.Mui-selected': {
        borderBottom: '2px solid #227AEB',
      },
      '& .MuiButtonBase-root': {
        borderBottom: '2px solid #E9E9E9',
        padding: '5px 10px',
      },
      '& .Mui-selected .MuiTab-wrapper': {
        color: '#227AEB',
        fontSize: '.75rem',
        fontWeight: 'normal',
      },
      '& .MuiTab-wrapper': {
        alignItems: 'center',
        fontSize: '.75rem',
        fontWeight: 'normal',
        color: '#9E9E9E',
      },
      '& .MuiFormControlLabel-root': {
        width: '50%',
      },
      [theme.breakpoints.up('sm')]: {
        '& .MuiTabs-flexContainer .MuiButtonBase-root': {
          minWidth: '110px'
        }
      },
    },
  }));

  const classList = useStyles();
  const data = props.slotData && props.slotData.get(selectedTab.name);
  //console.log("Heya" , selectedTab);
  return (
    <div className={[classList.root, classstyles.wrapper].join(' ')}>
      {/* tbd: display name logic to tabs to be changed */}
      <Tabs
        value={selectedTab.value}
        tabHeader={tabHeads}
        onChange={onTabChange}
        headerAsObject
      />
      <div>
        <div className={classstyles.hoursWrapper}>
          <p className={classstyles.hourContent}>
            <img src="/assets/images/morning.svg" alt="morning" />
            <span className={classstyles.hourTitle}>Morning</span>
          </p>
          <div className={classstyles.hourTabs}>
            { data && data.morning ? (
              <TimeSlotButtons
                data={data && data.morning}
                slotButtonsClass={classstyles.slotButtons}
                selectedSlotClass={classstyles.selectedSlot}
                selectSlot={selectSlot}
                slot={props.value}
              />
            ) : null }
          </div>
        </div>
        <div className={classstyles.hoursWrapper}>
          <p className={classstyles.hourContent}>
            <img src="/assets/images/afternoon.svg" alt="afternoon" />
            <span className={classstyles.hourTitle}>AfterNoon</span>
          </p>
          <div className={classstyles.hourTabs}>
            { data && data.afternoon ? (
              <TimeSlotButtons
                data={data && data.afternoon}
                slotButtonsClass={classstyles.slotButtons}
                selectedSlotClass={classstyles.selectedSlot}
                selectSlot={selectSlot}
                slot={props.value}
              />
            ) : null }
          </div>
        </div>
        <div className={classstyles.hoursWrapper}>
          <p className={classstyles.hourContent}>
            <img src="/assets/images/evening.svg" alt="evening" />
            <span className={classstyles.hourTitle}>Evening</span>
          </p>
          <div className={classstyles.hourTabs}>
            { data && data.evening ? (
              <TimeSlotButtons
                data={data && data.evening}
                slotButtonsClass={classstyles.slotButtons}
                selectedSlotClass={classstyles.selectedSlot}
                selectSlot={selectSlot}
                slot={props.value}
              />
            ) : null }
          </div>
        </div>
      </div>
    </div>
  );
};

ClassTabs.propTypes = {
  value: propTypes.string,
  handleSlot: propTypes.func.isRequired,
};

ClassTabs.defaultProps = {
  value: ''
};
export default ClassTabs;