import React from "react";
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader, Button, Typography } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { QuestionCard } from "./QuestionCardPractice";
import update from "immutability-helper";
import "./ReviewContainer.css";
import { Trans } 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].duration_seconds = value;
    this.sendData();
  }
  changeNegativeMark = (index, value) => {
    // console.log(index, value);
    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}
        text={card.label}
        pmark={card.pmark}
        nmark={card.nmark}
        duration_seconds={card.duration_seconds}
        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>
            {/* this input has the 'pmark' property associated with it because its copied from
            exam module but the duration property in practice is actually recorded by this
            object variable. */}
            <Input
              allowClear
              type="number"
              placeholder="Duration"
              // style={{ width: "10%" }}
              defaultValue="1"
              onChange={(e, newValue) => {
                e.target.value > 0 && this.setState({ pmark: e.target.value });
              }}
              value={this.state.pmark}
            />
            <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));
                }
              }}
            >
              <Trans i18nKey={"apply-btn"}>Apply</Trans>
            </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={"practice.step2.note2"}><strong>Note:</strong> Provide duration in seconds to apply to all questions</Trans>
            </Typography.Text>
          </div>
        </div>

				<div  className='ArrangeQuestions'>
          <table className='ReviewTable'>
            <thead data-scroll-enable={"1"}>
              <tr>
                <th><Trans i18nKey={"sl-no"}>S.No.</Trans></th>
                <th><Trans i18nKey={"questions-header"}>Questions</Trans></th>
                <th><Trans i18nKey={"practice.step2.duration"}>Duration</Trans><div>(<Trans i18nKey={"practice.step2.seconds"}>Seconds</Trans>)</div></th>
                <th><Trans i18nKey={"action-header"}>Action</Trans></th>
              </tr>
            </thead>
            {/* <div className="review-table-data-container"> */}
              <tbody>{this.props.modelState.map((card, i) => this.renderCard(card, i))}</tbody>
            {/* </div> */}
          </table>
        </div>
      </>
      )
    };
  };

export default ReviewContainer;