import React from 'react';
import './CreateExamName.css';
import { Input, Button, Form, message, Typography } from 'antd';
import { withTranslation } from 'react-i18next';
import { authenticationService } from '../../_services';
import { selectorService } from '../../services/selectorService';
import empty from '../EmptyImage';


class CreateExamName extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentUser: authenticationService.currentUserValue,
      examName: props.selectorState.name,
      image: empty(),
      update: false,
      examId: ''
    };
    this.handleCreateExamName = this.handleCreateExamName.bind(this);
    this.onTextChange = this.onTextChange.bind(this);
    this.sendData = this.sendData.bind(this);
  }

  onTextChange = (event) => {
    this.setState({
      examName: event.target.value,
      update: true
    });
  }

  handleCreateExamName() {
    if (!this.state.examName || this.state.examName === '') {
      message.warning('Please enter a valid exam name');
    } else {
      if (!this.state.update) this.state.examName = this.props.selectorState.name;
      let json = {
        name: this.state.examName,
        image: this.state.image,
        examtype_id: '1'
      }
      message.loading({ content: 'Creating Exam Name...' });
      selectorService.createExam(json).then(data => {
        if(+data.status.code < 0) {
          throw data.status.message[0];
        }
        let result = data.result;
        // console.log(result);
        result.current = 1;
        result.image = this.state.image;
        message.success({ content: 'Exam Name Created!', duration: 3 });
        this.sendData(result);
      }).catch(err => {
        console.log(err);
        message.error("Something went wrong, please try again");
      });
    }
  }

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

  
  render() {
    const placeholderTrans = this.props.t('enter-exam-name');
    return (<>
      <div className='createExamName'>
        {/* <Form className="exam-form"> */}
        <Typography.Text strong style={{ color: 'var(--font-color-primary)' }}>{this.props.t('exam-name')}</Typography.Text>
          {/* <br /> */}
          {/* <Space> */}
            <Input style={{width: 250}} placeholder={placeholderTrans} value={this.state.examName} onChange={e => { this.onTextChange(e) }} />
            {/* <Upload >
          <Button type="primary" icon={<UploadOutlined />}>Upload</Button>
        </Upload> */}
          {/* </Space> */}
          {/* <br /> */}
        {/* </Form> */}
      </div>
      <div className="button-container" data-need-margin={"false"}>
        <Button
          type="primary"
          onClick={(e) => {
            // console.log("inside");
            this.handleCreateExamName();
          }}
        >
          Continue
        </Button>
      </div>
      </>
    )
  };
};

export default withTranslation()(CreateExamName);