import React from 'react';
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader,Button, Typography } from 'antd';
import { QuestionCard } from './QuestionCard';
import update from 'immutability-helper';
import './ReviewContainer.css';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Trans, withTranslation } from 'react-i18next';



class ReviewContainer extends React.Component{
    constructor(props) {
        super(props);
    this.state = {
      cards : this.props.modelState,
      styleClassName: "subjectButtonTrue",//this.prop.styleClassName,
      pmark:1,
      nmark:0,
    };
    this.sendData = this.sendData.bind(this);
    this.renderCard = this.renderCard.bind(this);
    this.moveCard = this.moveCard.bind(this);
    this.sendClickData = this.sendClickData.bind(this);
    this.detachQuestion = this.detachQuestion.bind(this);
    this.changePositiveMark = this.changePositiveMark.bind(this);
    this.changeNegativeMark = this.changeNegativeMark.bind(this);
 }
    changePositiveMark = (index, value) => {
      // console.log(index,value);
      if (value > 0 ) this.state.cards[index].pmark = value;
      this.sendData();
    }
    changeNegativeMark = (index, value) => {
      // console.log(index,value);
      if (value >= 0 ) this.state.cards[index].nmark = value;
      this.sendData();
    }

    sendData = () => {
        this.props.parentCallback(this.state.cards);
      }

    sendClickData = (index) => {
        this.props.parentButtonCallback(index);
      }

      detachQuestion = (index) => {
        this.setState(prev => ({...prev, cards: this.state.cards.filter((card, idx) => idx!==index)}));
        this.props.detachQuestionCallback(index);
      }
    renderCard = (card, index) => {
      // console.log(card,index);
        return (<QuestionCard key={card.value} index={index} id={card.value} detachOngoing={this.props.detachOngoing} text={card.label} pmark={card.pmark}  nmark={card.nmark} moveCard={this.moveCard} detachQuestion={this.detachQuestion} changeNegativeMarkCall={this.changeNegativeMark} changePositiveMarkCall={this.changePositiveMark}/>);
    };

    moveCard = (dragIndex, hoverIndex) => {
        const dragCard = this.state.cards[dragIndex];
        this.setState({cards:update(this.state.cards, {
            $splice: [
                [dragIndex, 1],
                [hoverIndex, 0, dragCard],
            ],
        })});
        this.sendData();
    };
    
    render(){
      // console.log(this.state.cards)
      return(
        <>
        <div className="review-questions-subheader">
          <Input.Group compact>
            <InputNumber value={this.state.pmark} onChange={(e)=>{e > 0 && this.setState({pmark:e})}} min={1}  step={0.25}/>
            <InputNumber value={this.state.nmark} onChange={(e)=>{e >= 0 && this.setState({nmark:e})}} min={0}  step={0.25}/>
            <Button type="primary" onClick={()=>{
              for(let i in this.state.cards)
              {
                this.changePositiveMark(i,Number(this.state.pmark));
                this.changeNegativeMark(i,Number(this.state.nmark));
              }
            }}>{this.props.t('apply-btn')}</Button>
          </Input.Group>
          <div className="subheader-info">
            <InfoCircleOutlined style={{ fontSize: 16, padding: 2, margin: "4px" }} />
            <Typography.Text type={"warning"} style={{verticalAlign: 'text-bottom'}}>
              <Trans i18nKey="review-note">
                <strong>Note:</strong> Provide positive and negative marks respectively to apply to all questions. The values will always be positive.
              </Trans>
            </Typography.Text>
          </div>
        </div>

				<div  className='ArrangeQuestions'>
          <table className='ReviewTable'>
            <thead data-scroll-enable={"1"}>
              <tr>
                <th>{this.props.t('sl-no')}</th>
                <th>{this.props.t('questions-header')}</th>
                <th>{this.props.t('pos-marks')}</th>
                <th>{this.props.t('neg-marks')}</th>
                <th>{this.props.t('action-header')}</th>
              </tr>
            </thead>
            <tbody>{this.props.modelState.map((card, i) => this.renderCard(card, i))}</tbody>
          </table>
        </div>
			</>
      )
    };
  };

export default withTranslation()(ReviewContainer);