{"size": 10320, "ext": "js", "max_stars_repo_path": "src/views/listDiaryPoint/create/quiz/quiz.js", "max_stars_repo_name": "switcherSalca/asambleaWeb", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/listDiaryPoint/create/quiz/quiz.js", "max_issues_repo_name": "switcherSalca/asambleaWeb", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/views/listDiaryPoint/create/quiz/quiz.js", "max_forks_repo_name": "switcherSalca/asambleaWeb", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 42.4691358025, "max_line_length": 153, "alphanum_fraction": 0.3185077519}
import React, { useState, useEffect } from 'react';
import Select, { components } from 'react-select'
// import { useSelector } from 'react-redux';

import {
    CCard,
    CCardHeader,
    CCardBody,
    CInput,
    CRow,
    CCol,
    CButton, CDropdown,
    CDropdownToggle,
    CDropdownMenu,
    CDropdownItem,
    CCardTitle,

} from '@coreui/react';


import {
    AiOutlinePlus, AiOutlineDelete
} from "react-icons/ai";

import iconList from './listIconsApp';
import colorPallete from './listColorApp';
import { blueButton, redButton } from '../../../../assets/css/global';
import { cardHeader } from '../../../../assets/css/global';

const Quiz = (props) => {
    const { dispatch, state, editMode, createToast } = props

    const initialState = {
        color: { id: "Color", reactColor: "#ffffff", text: "#000000" },
        icon: { reactIcon: null },
        answerOption: ""
    }

    const [answerOption, setAnswerOption] = useState(initialState.answerOption)
    const [color, setColor] = useState(initialState.color)
    const [icon, setIcon] = useState(initialState.icon)

    //Agrega una opción al listado de opciones de respuesta y setea los inputs
    const addOption = (_item) => {
        validateInputs(() => {
            dispatch({
                type: "[Survey] set option", payload:
                {
                    description: answerOption,
                    color: color,
                    icon: {
                        flutterIcon: icon.flutterIcon,
                        id: icon.id,
                        name: icon.name
                    }
                }
            }
            )
            setColor(initialState.color)
            setIcon(initialState.icon)
            setAnswerOption(initialState.answerOption)
        })
    }

    const validateInputs = _exec => {
        if (answerOption.length === 0) {
            createToast('ALERTA', 'Ingrese una respuesta!')
        } else if (icon.reactIcon === null) {
            createToast('ALERTA', 'Seleccione un ícono!')
        } else if (color.reactColor === "#ffffff") {
            createToast('ALERTA', 'Seleccione un color para la respuesta!')
        } else {
            _exec()
        }
    }

    useEffect(() => {
        if (state.survey.state) {

        }
    }, [state.survey.state])

    // Busca un icono a través del nombre 
    const searchIcon = (_name) => {
        return iconList.find(icon =>
            icon.name === _name
        )
    }

    //Elimina una respuesta
    const deleteAnswer = (_item) => {
        const result = state.survey.options.filter(e => e.description !== _item.description)
        dispatch({ type: "[Survey] set options", payload: result })
        return result
    }

    return (
        <CCard>
            <CCardHeader className="d-flex justify-content-between" style={cardHeader}>
                <CCardTitle>
                    Encuesta
                </CCardTitle>
            </CCardHeader>
            <CCardBody>
                <CRow >
                    <CCol sm={6} className="align-self-center">
                        <CCard>
                            <CCardBody>
                                <CCardTitle> Titulo de la encuesta</CCardTitle>
                                <CInput
                                    value={state.survey.description}
                                    placeholder="Titulo de la encuesta"
                                    onChange={({ target }) => { dispatch({ type: "[Survey] setDescription", payload: target.value }) }} />
                            </CCardBody>
                        </CCard>
                    </CCol>
                    <CCol md={6} >
                        <CCard>

                            <CCardBody>
                                <CCardTitle> Nueva opción de respuesta</CCardTitle>
                                <CRow className="justify-content-center pb-2">
                                    <CCol sm={3} className="align-self-center">
                                        <CInput placeholder="Respuesta" value={answerOption} onChange={({ target }) => setAnswerOption(target.value)} />
                                    </CCol>

                                    <CCol sm={3} className="align-self-center">
                                        <CDropdown
                                        >
                                            <CDropdownToggle style={{ backgroundColor: color.reactColor, display: "block-in-line", color: color.text }} >
                                                Color
                                            </CDropdownToggle>
                                            <CDropdownMenu>
                                                {
                                                    colorPallete.map(item =>
                                                        <CDropdownItem
                                                            onClick={() => { setColor(item) }}
                                                            style={{ color: item.text, backgroundColor: item.reactColor, display: "block-in-line" }}
                                                            className="justify-content-center" >
                                                            {
                                                                item.id
                                                            }
                                                        </CDropdownItem>
                                                    )
                                                }
                                            </CDropdownMenu>
                                        </CDropdown>
                                    </CCol>
                                    <CCol sm={3} >
                                        <CDropdown>
                                            <CDropdownToggle
                                            >
                                                Icono
                                                {
                                                    icon.reactIcon === null ? "" : icon.reactIcon
                                                }
                                            </CDropdownToggle>
                                            <CDropdownMenu className="align-self-center">
                                                {
                                                    iconList.map(item =>
                                                        <CDropdownItem
                                                            onClick={() => { setIcon(item) }}
                                                            className="justify-content-center" >
                                                            {
                                                                searchIcon(item.name) === null ? "" : searchIcon(item.name).reactIcon

                                                            }
                                                        </CDropdownItem>
                                                    )
                                                }
                                            </CDropdownMenu>
                                        </CDropdown>
                                    </CCol>
                                    <CCol sm={3}>
                                        <CButton
                                            shape="pill"
                                            style={blueButton}
                                            onClick={() => { addOption() }}
                                        > Agregar <AiOutlinePlus /></CButton>
                                    </CCol>

                                </CRow>
                            </CCardBody>
                        </CCard>

                    </CCol>
                </CRow>
                <CRow>
                    <CCol>
                        {
                            state.survey.options.length > 0 ? <>
                                <table className="table">
                                    <thead>
                                        <th>Opción</th>
                                        <th>Icono</th>
                                        <th></th>
                                    </thead>
                                    {
                                        state.survey.options.map(element => {
                                            return (
                                                <tr key={element.description}>
                                                    <td style={{ color: element.color.reactColor }}>
                                                        {element.description}
                                                    </td>
                                                    <td style={{ color: element.color.reactColor }}>{searchIcon(element.icon.name).reactIcon}</td>
                                                    <td>
                                                        <CButton
                                                            onClick={() => {
                                                                deleteAnswer(element)
                                                            }}
                                                            style={redButton}
                                                        >
                                                            <AiOutlineDelete />
                                                        </CButton>
                                                    </td>
                                                </tr>)
                                        })
                                    }
                                    <tbody>
                                    </tbody>
                                </table>
                            </> : <></>
                        }
                    </CCol>
                </CRow>
            </CCardBody >
        </CCard >
    )
}

const iconStyle = {
    fontSize: '22px',
    padding: '0',
    color: 'white',
    display: 'flex',
    alignItems: 'center',
}

export default Quiz;



