import '../App.css';
import { Button, Row, Col, Dropdown, Form, FormLabel, FormText, FormControl, FormGroup } from 'react-bootstrap'
import React, { useState, useEffect} from 'react';
import { ReactComponent as ArrowIcon } from './arrow.svg';
import { WithContext as ReactTags } from 'react-tag-input';

function Professor() {
    

    function Topics(){
        let counter = 0;
        const [topics, setTopics] = useState([<Topic index = {counter}></Topic>])
        function addNewTopic(){
            counter++;
            setTopics([topics].concat([<Topic index = {counter}></Topic>]))
        }
        function Topic(props){
            const index = props.index;
            const [isOtherShowing, setIsOtherShowing] = useState(); // Allows for custom topic
            const [topic, setTopic] = useState("Select a Topic");  // Topic selected
            const [topicSents, setTopicSents] = useState(""); // Textarea input for topic
            const [keywords, setKeywords] = useState(false); // Has keywords?
            function handleCheck() {
                if (keywords == false) {
                    setKeywords(true);
                } else {
                    setKeywords(false);
                }
                console.log(keywords);
                console.log(index);
            }

            return(
                <div className="topics d-inline-flex" style={{ paddingLeft: '2em', flexDirection:'column', width:'100%'}}>
                
                <div className="dropdown-container">
                    <h4 className="d-inline section-header">Topic:</h4>
                    <Dropdown>
                        <Dropdown.Toggle className="cyan-btn d-inline-block" id="dropdown-basic">
                            {topic}
                        </Dropdown.Toggle>
                        <Dropdown.Menu flip={false}>
                            <Dropdown.Item eventKey="1" onClick={(e) => setTopic("Issue")}>Issue</Dropdown.Item>
                            <Dropdown.Item eventKey="2" onClick={(e) => setTopic("Rule")}>Rule</Dropdown.Item>
                            <Dropdown.Item eventKey="3" onClick={(e) => setTopic("Policy")}>Policy</Dropdown.Item>
                            <Dropdown.Item eventKey="4" onClick={(e) => setTopic("Inference")}>Inference</Dropdown.Item>
                            <Dropdown.Item eventKey="5" onClick={(e) => setTopic("Application")}>Application</Dropdown.Item>
                            <Dropdown.Item eventKey="6" onClick={(e) => setTopic("Conclusion")}>Conclusion</Dropdown.Item>
                            <Dropdown.Item eventKey="7" onClick={(e) => {
                                e.stopPropagation();
                                if (!isOtherShowing) {
                                    setIsOtherShowing(true)
                                }

                            }}>{isOtherShowing ? <div className="other-input-container">
                                <input type="text" placeholder="Enter a topic"  onChange={e => setTopic(e.target.value)} /> <ArrowIcon className="arrow" height={10} width={10} onClick={() => console.log(topic)}/></div> : 'Other'}</Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </div>
              
                <div className="shadow d-block" style={{padding: 0}}>
                   <FormControl  as='textarea' rows = {3} style={{height:'4em', padding: '1em'}}  onChange={e => setTopicSents(e.target.value)}></FormControl>
                </div>
                <Row>
                    <div className="d-inline-flex" style={{whiteSpace: "nowrap"}}>
                        <div className="form-check d-inline" style={{ width: 'fit-content', padding: '1.25em .5em 0', flex: '16',marginBottom:'1em'}}>
                            <input className="form-check-input" type="checkbox"  onChange={handleCheck} style={{ marginLeft: '2em' }} />
                            <label className="form-check-label" style={{ width: 'fit-content', paddingLeft: ".5em"}}>
                                <p style={{ width: 'fit-content'}}>Keywords</p>
                            </label>
                        </div>
                        <div className="" style={{whiteSpace:"normal", flex: '68', paddingTop: '1em'}}  >
                        <Keywords display={keywords} />
                        </div>
                        
                    </div>
                </Row>
                
            </div>
            )
        }
        
    
        return(
            <div>
                {topics.map((topic)=> <div>{topic}</div>)}
                <Row style={{height: "3em"}}>
                <div style={{display:'inline', position: "relative", zIndex:"0"}}>
                    <Button onClick={addNewTopic} className="cyan-btn" style={{position: "absolute", right: "2em"}}>Add New Topic</Button>
                </div>
            </Row>
            </div>
           
            
        )
    }
    function Keywords(props) {
        // TO DO: Use keywords function to generate list of suggested keywords.
        const keywordSuggestions = []
        const [tags, setTags] = React.useState([  ]);

        const KeyCodes = {
            comma: 188,
            enter: 13
        };
          
        const delimiters = [KeyCodes.comma, KeyCodes.enter];
        
        
        const handleDelete = i => {
            setTags(tags.filter((tag, index) => index !== i));
        };
        
        const handleAddition = tag => {
            setTags([...tags, tag]);
        };
        
        const handleDrag = (tag, currPos, newPos) => {
            const newTags = tags.slice();
        
            newTags.splice(currPos, 1);
            newTags.splice(newPos, 0, tag);
        
            // re-render
            setTags(newTags);
        };
        
        const handleTagClick = index => {
            console.log('The tag at index ' + index + ' was clicked');
        };
        if(props.display){
            return (
               
                    <ReactTags
                        tags={tags}
                        delimiters={delimiters}
                        handleDelete={handleDelete}
                        handleAddition={handleAddition}
                        handleDrag={handleDrag}
                        handleTagClick={handleTagClick}
                        inputFieldPosition="top"
                        autocomplete={true}
                        allowUnique={true}
                        editable={false}

                        placeholder="Enter keywords for this topic..."

                    />
       

            )
        }else{
            return <div></div>
        }
            

    }
    // Professor Component: 
    return (
        <div className="Upload container" >
            <Row >

                <Col lg={5} style={{ padding: '2em' }}>
                    <h2>Question</h2>
                    <div className="shadow" style={{padding:0}} >
                        <FormControl  as='textarea' rows = {4} style={{height:'10em', padding: '1em'}}></FormControl>
                    </div>
                    <br></br>

                    <hr/>
                    <br></br>
                    <h2>Preferences</h2>
                    <FormGroup>
                        {['radio'].map((type) => (
                            <div key={`inline-${type}`} className="mb-3">
                                <FormLabel>
                                    Answer Format:
                                </FormLabel>
                            <Form.Check
                                label="IRAC"
                                name="group1"
                                type={type}
                            />
                            <Form.Check
                                label="CREAC"
                                name="group1"
                                type={type}
                            />
                            <Form.Check
                                label="Other"
                                name="group1"
                                type={type}
                            />
                            
                            </div>
                        ))}
                    </FormGroup>
                    <FormGroup>
                       <FormLabel>Time Limit: </FormLabel>
                       <Form.Control type="text" placeholder="Minutes"  style={{width: "6em", display:'inline', margin:'0 1em '}}/>
                    </FormGroup>
                    <FormGroup>
                       <FormLabel>Minimum Word Count: </FormLabel>
                       <Form.Control type="text" placeholder=""  style={{width: "6em", display:'inline', margin:'0 1em '}}/>
                    </FormGroup>
                </Col>
                <Col lg={7} style={{ padding: '2em' }} >
                    <h2>Answer</h2>
                    <FormGroup>
                        <div className="shadow" style={{padding: 0}}>
                        <FormControl  as='textarea' rows = {3} style={{height:'10em', padding: '1em'}}> </FormControl>                   
                         </div>
                    </FormGroup>
                    
                    <br></br>
                    <FormGroup>
                         <Topics></Topics>
                    </FormGroup>
                  

                </Col>
                
            </Row>
            
        </div>
    )

}

export default Professor;
