import { React, observer, styled } from 'vendor';
import { Icon } from 'shared';
import { colors } from 'theme';
import SettingsIcon from '../../components/icons/settings';
import PublishScores from '../../components/buttons/publish-scores';

const Bar = styled.div`
  display: flex;
  justify-content: space-between;
  padding: 1rem 2.4rem;
  border-top: 1px solid ${colors.neutral.pale};
  border-bottom: 1px solid ${colors.neutral.pale};
`;

const StyledSettingsIcon = styled(SettingsIcon)`
    border: 1px solid ${colors.neutral.pale};
    padding: 10px;
    margin-left: 20px;
`;

const QuestionWrapper = styled.button`
  border: 1px solid ${colors.neutral.pale};
  width: 6rem;
  height: 6rem;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: ${colors.neutral.thin};
  background-color: ${({ current }) => current ? colors.neutral.light : 'white'};
  h6 {
    color: ${colors.link};
  }
  & + & {
    border-left: 0;
  }
`;

const QuestionsWrapper = styled.div`
  display: flex;

`;

const Controls = styled.div`
  display: flex;
  align-items: center;
  & .btn.btn-plain {
    border: 1px solid ${colors.neutral.pale};
    padding: 10px;
    margin-left: 20px;
    color: ${colors.neutral.grayblue}
  }
`;

const StyledPublishScores = styled(PublishScores)`
    && {
      padding: 10px;
    }
`;

const Question = observer(({ heading, ux, index }) => {
  const stats = ux.showOnlyAttempted ? heading.gradedStats : heading.gradedStatsWithUnAttemptedResponses;
  const progress = ux.showOnlyAttempted ? heading.gradedProgress : heading.gradedProgressWithUnAttemptedResponses;
  return (
    <QuestionWrapper current={ux.selectedHeadingIndex == index} onClick={() => ux.goToQuestionHeading(index)} data-test-id={`question-${index}`}>
      <h6>{heading.title}</h6>
      {stats.complete ? <Icon type="check" color="green" /> : <span>{progress}</span>}
    </QuestionWrapper>
  );
});


const QuestionsBar = observer(({ ux }) => {
  return (
    <Bar data-test-id="questions-bar" className="questions-bar">
      <QuestionsWrapper>
        {ux.headings.map((heading, index) => <Question key={index} heading={heading} ux={ux} index={index} />)}
      </QuestionsWrapper>
      <Controls>
        <StyledPublishScores ux={ux} variant="default" />
        <StyledSettingsIcon
          ux={ux}
          label="Adjust display settings"
          controls={{
            hideStudentNames: 'Hide student names',
            alphabetizeResponses: 'Show responses in alphabetical order',
            showOnlyAttempted: 'Show only attempted responses',
          }}
          moreInfo="Unattempted responses are assigned a zero after the due date. Students can submit late responses until the close date"
        />
      </Controls>
    </Bar>
  );
});


export default QuestionsBar;

@@ -234,16 +234,84 @@
 scores';
+%0Aimport %7B CornerTriangle %7D from '../../components/dropped-question';
 %0A%0Aconst 
@@ -645,32 +645,38 @@
 20px;%0A%60;%0A%0Aconst 
+Styled
 QuestionWrapper 
@@ -668,32 +668,91 @@
 uestionWrapper =
+ styled.div%60%0A  position: relative;%0A%60;%0A%0Aconst StyledButton =
  styled.button%60%0A
@@ -1185,17 +1185,16 @@
 : flex;%0A
-%0A
 %60;%0A%0Acons
@@ -1781,16 +1781,60 @@
 ponses;%0A
+  const droppedQuestion = heading.dropped;%0A%0A
   return
@@ -1837,24 +1837,30 @@
 turn (%0A    %3C
+Styled
 QuestionWrap
@@ -1862,16 +1862,37 @@
 nWrapper
+%3E%0A      %3CStyledButton
  current
@@ -1974,28 +1974,42 @@
 ndex)%7D data-
-test
+StyledStyledButton
 -id=%7B%60questi
@@ -2029,16 +2029,18 @@
 %3E%0A      
+  
 %3Ch6%3E%7Bhea
@@ -2056,16 +2056,18 @@
 e%7D%3C/h6%3E%0A
+  
       %7Bs
@@ -2145,26 +2145,349 @@
 /span%3E%7D%0A    
-%3C/
+  %0A      %3C/StyledButton%3E%0A      %7B%0A        Boolean(droppedQuestion) &&%0A        %3CCornerTriangle color=%22blue%22%0A          tooltip=%7BdroppedQuestion.dropped_method == 'zeroed' ?%0A            'Question dropped: question is worth zero points' : 'Question dropped: full credit assigned for this question'%7D%0A        /%3E%0A      %7D%0A    %3C/Styled
 QuestionWrap

add corner triangle in questions-bar in grader screen to see if question was dropped