import React from 'react'
import { translate } from 'react-i18next'
import { Form, Button } from 'react-bootstrap';
import { Feather } from 'react-web-vector-icons';
import * as api from 'common/api'
import * as utils from 'common/utils'
import XnIndicator from 'common/components/XnIndicator'

import { SmartAttendanceAttendeeDetailModal } from '../attendance-attendee-detail'

class SmartAttendanceAttendeeIntegrationDetailModal extends SmartAttendanceAttendeeDetailModal {
    constructor(props) {
        super(props);
    }

    /**
     * 출결자 정보를 불러온다.
     */
    getAttendee() {
        const { t } = this.props
        // 출결자 정보를 불러온다.
        api.getAttendeeIntegration(this.state.attendance.attendance_id, this.props.user_login)
        .then(res => {
            if (!res.data) {
                throw res
            }
            this.setState({
                attendee: res.data,
                changedAttendeeStatus: res.data.status,
                changedAttendeeStatusCause: (typeof res.data.status_cause !== "undefined") ? res.data.status_cause : null,
                loading: false
            })
        })
        .catch(err => {
            alert(t('SmartAttendanceMessage:Failed to fetch attendee information.'))
            console.log(err.response)
            this.setState({
                loading: false
            })
        })
    }

    /**
     * 학사 연동된 스마트 출결인 경우, 메시지를 표시한다.
     */
    renderIntegrationInfo() {
        const { t } = this.props

        return (
            <div>
                <div className="xn-smart-attendance-attendee-message-wrap">
                    <Feather name="info" size={15} color="#FF001A" />
                    <span className="xn-smart-attendance-attendee-message">{t("SmartAttendanceMessage:Attendee integration infomation message")}</span>
                </div>
            </div>
        )
    }

    /**
     * 출석 상태 변경 부분 렌더링
     */
    renderChangeStatus() {
        const { t } = this.props

        const attendee = this.state.attendee
        const changedAttendeeStatus = this.state.changedAttendeeStatus
        const attendanceCauses = (typeof this.state.attendanceCauses[changedAttendeeStatus] !== "undefined" && this.state.attendanceCauses[changedAttendeeStatus] != null) ? this.state.attendanceCauses[changedAttendeeStatus].split(',') : []
        const changedAttendeeStatusCause = this.state.changedAttendeeStatusCause
        let checkedCause = (changedAttendeeStatusCause && attendanceCauses.includes(changedAttendeeStatusCause)) ? changedAttendeeStatusCause : attendanceCauses[0]

        return (
            <div className="xnas-detail-status-wrap">
                <div className="xnas-detail-status-title">{t("SmartAttendance:Attendee Status")}</div>
                <div className="xnas-detail-status-btn-wrap">
                {
                    this.status.map((s, key) => {
                        const isSelected = attendee && changedAttendeeStatus === s.value
                        if (isSelected) {
                            return <Button 
                                          key={key}
                                        variant="outline-secondary"
                                        className={`xnsaadm-attendee-status-btn ${ isSelected ? s.value : ''}`}
                                    >
                            {s.title}
                            {
                                isSelected == true &&
                                <Feather
                                    name='check'
                                    color='white'
                                    size={5}
                                />
                            }
                            </Button>
                        } else {
                            return null
                        }
                    })
                }
                </div>
                {(changedAttendeeStatus != null 
                    && changedAttendeeStatus !== 'present' 
                    && attendanceCauses.length > 0) ?
                    <div>{checkedCause}</div>
                    : null
                }
            </div>
        )
    }

    /**
     * 메모 적는 칸을 렌더링한다.
     */
    renderMemo() {
        const { t } = this.props
        return (
            <div className="xnsa-detail-memo-wrap">
                <div className="xnsa-detail-memo-title">{t("SmartAttendance:Memo")}</div>
                <div>{(this.state.attendee) ? this.state.attendee.memo : ''}</div>
            </div>
        )
    }

    /**
     * 상세이력 하단의 버튼들 렌더링
     */
    renderBottom() {
        return null
    }
}

export default translate(["Common", "SmartAttendanceAttendeeDetailModal"])(SmartAttendanceAttendeeIntegrationDetailModal)

summer.jpg