import { React, observable, observer, action, cn, styled } from 'vendor';
import { partial } from 'lodash';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Overlay, Popover, Button } from 'react-bootstrap';
import UiSettings from 'shared/model/ui-settings';
import { AddAssignmentLink } from './task-dnd';
import PastAssignments from './past-assignments';
import TourAnchor from '../../components/tours/anchor';
import Course from '../../models/course';
import AddMenu from './add-menu';
import GradingTemplateLink from '../grading-templates/link';
import CalendarHelper from './helper';
import { colors } from 'theme';

const IS_INTRO_VIEWED = 'viewed-plan-dnd-intro';
const USE_SETTINGS = false;

// eslint-disable-next-line
const IntroPopover = ({ show, onClose }) => (
  <Overlay
    show={show}
    placement="right"
    container={document.querySelector('.new-assignments')}>
    <Popover id="drag-intro">
      <Popover.Content>
        <p>
          Click to add, or just drag to calendar.
        </p>
        <Button size="small" onClick={onClose}>
          Got it
        </Button>
      </Popover.Content>
    </Popover>
  </Overlay>
);

const StyledSeparator = styled.hr`
  border-color: ${colors.neutral.pale};
  margin: 0.6rem 0.8rem 1.7rem;
`;

export default
@observer
@withRouter
class AddAssignmentSidebar extends React.Component {

  static propTypes = {
    course: PropTypes.instanceOf(Course).isRequired,
    isOpen: PropTypes.bool.isRequired,
    cloningPlanId: PropTypes.string,
    history: PropTypes.object.isRequired,
  }

  @observable shouldshowIntro = false;
  @observable shouldShowPopover = false;
  @observable pendingIntroTimeout;
  @observable willShowIntro = Boolean(
    CalendarHelper.shouldIntro() && !(USE_SETTINGS ? UiSettings.get(IS_INTRO_VIEWED) : false)
  )

  addMenu = new AddMenu({
    history: this.props.history, renderMenuLink: this.renderMenuLink,
    isSidebar: true,
  });

  componentDidUpdate(oldProps) {
    // kickoff intro if we're opening after being closed
    if (this.willShowIntro && !oldProps.isOpen && this.props.isOpen) {
      this.pendingIntroTimeout = CalendarHelper.scheduleIntroEvent(this.showIntro);
    }
  }

  componentWillUnmount() {
    CalendarHelper.clearScheduledEvent(this.pendingIntroTimeout);
  }

  @action.bound showIntro() {
    this.shouldShowIntro = true;
    this.willShowIntro = false;
    this.pendingIntroTimeout = CalendarHelper.scheduleIntroEvent(this.showPopover);
  }

  @action.bound showPopover() {
    this.shouldShowPopover = true;
    this.pendingIntroTimeout = false;
  }

  @action.bound onPopoverClose() {
    if (USE_SETTINGS) { UiSettings.set(IS_INTRO_VIEWED, true); }
    this.shouldShowPopover = false;
    this.shouldShowIntro = false;
  }

  @action.bound renderMenuLink(link, goToBuilder) {
    return (
      <TourAnchor tag="li" key={link.type} id={`sidebar-add-${link.type}-assignment`}>
        <AddAssignmentLink link={link} goToBuilder={partial(goToBuilder, link.pathname, null)} onDrag={this.onPopoverClose} />
      </TourAnchor>
    );
  }

  render() {
    return (
      <div
        className={cn('add-assignment-sidebar', { 'is-open': this.props.isOpen })}
      >
        <TourAnchor id="sidebar-add-tasks" className="sidebar-section">

          <GradingTemplateLink course={this.props.course} />
          <StyledSeparator />
          <div className="section-label">
            New
          </div>
          <ul
            className={cn('new-assignments', { 'is-intro': this.shouldShowIntro })}
            ref="newAssignments"
          >
            {this.addMenu.render(this.props)}
          </ul>
          <IntroPopover
            onClose={this.onPopoverClose}
            show={this.shouldShowPopover && this.props.isOpen}
          />
        </TourAnchor>
        <PastAssignments
          className="sidebar-section"
          course={this.props.course}
          cloningPlanId={this.props.cloningPlanId} />
      </div>
    );
  }
}

@@ -1194,22 +1194,141 @@
 %0A%0Aconst 
-Styled
+GradingTemplateLinkWrapper = styled.div %60%0A  margin-top: -0.75rem;%0A%0A  a %7B%0A    padding: 1rem;%0A    display: block;%0A  %7D%0A%60;%0Aconst 
 Separato
@@ -1342,10 +1342,11 @@
 led.
-hr
+div
 %60%0A  
@@ -1356,14 +1356,22 @@
 der-
-color:
+top: 1px solid
  $%7Bc
@@ -1412,11 +1412,9 @@
 rem 
-0.8
+1
 rem 
@@ -3426,17 +3426,57 @@
 ction%22%3E%0A
-%0A
+          %3CGradingTemplateLinkWrapper%3E%0A  
         
@@ -3542,15 +3542,11 @@
     
-%3CStyled
+  %3C
 Sepa
@@ -3550,24 +3550,64 @@
 eparator /%3E%0A
+          %3C/GradingTemplateLinkWrapper%3E%0A
           %3Cd

fix the alignment of grading templates link