import React from 'react';
import { Layout, Select } from 'antd';
// import 'antd/dist/antd.css';
import '../AllQuestions.css';

// import Selector from './Selector';
import QuestionTableNew from './QuestionTableNew';
import { authenticationService } from '../../../_services';
import { selectorService } from '../../../services/selectorService';

//experiment
import SelectorNew from '../SelectorNew';


function Draft(props) {
    const [state, setState] = React.useState({
        currentUser: authenticationService.currentUserValue,
        top: 'topLeft',
        bottom: 'bottomRight',
        classes: authenticationService.currentClassValue,
        subject: "",
        category: "",
        questionType: "",
        complexity: "",
        translationMissing: ""
    });

    function handleSelection(property, value = "") {
        // console.log(property);
        setState(prevVal => ({
            ...prevVal,
            [property]: value,
        }));
        // callbackFunction();
    }

    function handleMissingLang(val) {
        setState(prevVal => ({
            ...prevVal,
            translationMissing: val
        }));
    }

    return (
        <Layout>
            <Layout className="all-questions-section">
                <div className="selector-section">
                    <div className='left-side'>
                        <SelectorNew serviceCall={selectorService.loadSubjects} pathActive={state.classes} handleSelection={handleSelection} property="subject"
                            placeholder="Select a subject" />
                        <SelectorNew serviceCall={selectorService.loadCategory} pathActive={state.subject} handleSelection={handleSelection} property="category"
                            placeholder="Select a topic" />
                        <SelectorNew serviceCall={selectorService.loadQuestionTypes} handleSelection={handleSelection} property="questionType"
                            placeholder="Select the question type" />
                        <SelectorNew handleSelection={handleSelection} property="complexity" placeholder="Select a difficulty" />
                        <Select placeholder="Missing language filter" onChange={handleMissingLang} allowClear>
                            {props.language.map(lang => {
                                return <Select.Option key={lang.code} value={lang.code}>{lang.name}</Select.Option>
                            })}
                        </Select>
                    </div>
                </div>
                <Layout className="draft-questions-section">
                    <div>
                        <QuestionTableNew selectorState={state} page={1} language={props.language} />
                    </div>
                </Layout>
            </Layout>
        </Layout>
    );
}

export default Draft;
