import m from "mithril"
import _isEmpty from "lodash.isempty"
import _map from "lodash.map"
import Siswa from "../models/Siswa"
import AccessLog from "../models/AccessLog"

var component = {
    oninit: () => {
        AccessLog.fetch('sk-hasil-belajar');
    },
    namaMapel: {
        'agama': 'Pendidikan Agama',
        'pkn': 'Pendidikan Kewarganegaraan',
        'indo': 'Bahasa Indonesia',
        'penjas': 'Pendidikan Jasmani dan Kesehatan',
        'senbud': 'Seni Budaya',
        'mtk': 'Matematika',
        'inggris': 'Bahasa Inggris',
        'ipa': 'Ilmu Pengetahuan Alam',
        'ips': 'Ilmu Pengetahuan Sosial',
        'fisika': 'Fisika',
        'kimia': 'Kimia',
        'kwh': 'Kewirausahaan',
        'kkpi': 'Keterampilan Komputer dan Pengelolaan Informasi',
        'dkk': 'Dasar Kompetensi Keahlian',
        'kk': 'Kompetensi Keahlian',
        'mandarin': 'Bahasa Mandarin',
        'kbi': 'Korespondensi Bahasa Inggris',
        'pap': 'Praktek Administrasi Perkantoran',
        'myob': 'MYOB',
    },
    rataRata: {
        raport: [],
        usbn: [],
        unbk: [],
    },
    view: () => {
        component.rataRata = {
            raport: [],
            usbn: [],
            unbk: [],
        };
        return [
            m('.header', [
                m('span.italic.text-xs', [
                    'Saat ini sudah ',
                    m('strong', [
                        AccessLog.current.accessed,
                        ' / ',
                        AccessLog.current.total,
                    ]),
                    ' siswa yang telah mencetak surat keterangan hasil belajar.'
                ]),
                m('h1.title', 'Surat Keterangan Hasil Belajar Siswa SMK Bhakti Anindya'),
                m('span', 'Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini.'),
            ]),
            m('form.form', {
                onsubmit: e => {
                    e.preventDefault();
                    Siswa.cariData({
                        nisn: e.target.elements.nisn.value,
                        tanggalLahir: e.target.elements.tanggalLahir.value,
                        src: 'sk-hasil-belajar',
                        with: 'hasilBelajar',
                    });
                }
            },
                m('.form-grid', [
                    m('.form-group', [
                        m('label.form-label[for=input-nisn]', 'NISN'),
                        m('input.form-input.input-text#input-nisn[name=nisn][type=text][autocomplete=off][required]'),
                        m('p.input-helper', [
                            'Nomor Induk Siswa Nasional. ',
                            !_isEmpty(Siswa.error) ?
                            Siswa.error.errors.siswa != undefined ? m('span.error', Siswa.error.errors.siswa[0] + ' ')
                            : Siswa.error.errors.nisn != undefined ? m('span.error', Siswa.error.errors.nisn[0] + ' ')
                            : '' : '',
                        ]),
                    ]),
                    m('.form-group', [
                        m('label.form-label[for=input-tanggalLahir]', 'Tanggal Lahir'),
                        m('input.form-input.input-text#input-tanggalLahir[name=tanggalLahir][type=text][autocomplete=off][required]'),
                        m('p.input-helper', [
                            'Tanggal lahir dengan format YYYYMMDD. Contoh: untuk tanggal 29 Mei 2000 ditulis 20000529. ',
                            !_isEmpty(Siswa.error) && Siswa.error.errors.tanggalLahir != undefined ? m('span.error', Siswa.error.errors.tanggalLahir[0] + ' ') : '',
                        ]),
                    ]),
                    m('button.form-submit#input-submit[type=submit]', 'Lihat'),
                ])),
            _isEmpty(Siswa.current) ? null : m('.letter', [
                m('span.mobile-info', 'Untuk mencetak surat ini, harap gunakan browser di desktop PC.'),
                m('button.print-button', {
                    onclick: () => {
                        if (confirm('Surat Keterangan ini hanya dapat dicetak satu kali. Lanjutkan?')) {
                            AccessLog.create({siswaId: Siswa.current.id, src: 'sk-hasil-belajar'}).then(() => {
                                AccessLog.fetch('sk-hasil-belajar');
                                window.print();
                            })
                            .catch(e => {
                                if (e.code === 0) {
                                    AccessLog.error = {
                                        message: e.message,
                                        errors: {
                                            create: ['Terjadi kesalahan saat menghubungkan ke server.'],
                                        },
                                    };
                                }
                                else {
                                    AccessLog.error = JSON.parse(e.message);
                                }
                            });
                        }
                    }
                }, [
                    m.trust('⎙'),
                    ' Print',
                ]),
                !_isEmpty(AccessLog.error)
                ? m('span.error.ml-2', AccessLog.error.errors.create[0])
                : null,
                m('.letter__header', [
                    m('img[src=img/letter-head.jpg]'),
                ]),
                m('', {
                    style: {
                        height: '1px',
                        width: '100%',
                        backgroundColor: '#000',
                        marginTop: '.5rem',
                    }}),
                m('', {
                    style: {
                        height: '3px',
                        width: '100%',
                    }}),
                m('', {
                    style: {
                        height: '3px',
                        width: '100%',
                        backgroundColor: '#000',
                        marginBottom: '1rem',
                    }}),
                m('.letter__body', [
                    m('strong.letter__body-header', [
                        m('p', m('span.border-b.border-black', 'SURAT KETERANGAN')),
                        m('p.font-normal.mt-1', 'Nomor: 077/SMK-BA/V/2019'),
                    ]),
                    m('br'),
                    m('table', [
                        m('tr',
                            m('td[colspan=6]', 'Yang bertanda tangan di bawah ini :')),
                        m('tr', [
                            m('td'),
                            m('td', 'Nama'),
                            m('td', ':'),
                            m('td[colspan=3]', 'Drs. Engkos Kosasih, M.M.'),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Jabatan'),
                            m('td', ':'),
                            m('td[colspan=3]', 'Kepala Sekolah'),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Asal Sekolah'),
                            m('td', ':'),
                            m('td[colspan=3]', 'SMK Bhakti Anindya'),
                        ]),
                        m('tr',
                            m('td',
                                m.trust(' '))),
                        m('tr',
                            m('td[colspan=6]', 'Menerangkan bahwa')),
                        m('tr',
                            m('td',
                                m.trust(' '))),
                        m('tr', [
                            m('td'),
                            m('td', 'Nama'),
                            m('td', ':'),
                            m('td[colspan=3]', Siswa.current.nama),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Tempat / Tanggal Lahir'),
                            m('td', ':'),
                            m('td', Siswa.current.tempat_lahir + ' , ' + Siswa.current.tanggal_lahir),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'NIS / NISN'),
                            m('td', ':'),
                            m('td', Siswa.current.nis + ' / ' + Siswa.current.nisn),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Nomor Peserta'),
                            m('td', ':'),
                            m('td[colspan=3]', Siswa.current.nopes),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Kelas'),
                            m('td', ':'),
                            m('td[colspan=3]', Siswa.current.kelas),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Bidang Studi Keahlian'),
                            m('td', ':'),
                            m('td[colspan=3]', Siswa.current.bsk),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Program Studi Keahlian'),
                            m('td', ':'),
                            m('td[colspan=3]', Siswa.current.psk),
                        ]),
                        m('tr', [
                            m('td'),
                            m('td', 'Kompetensi Keahlian'),
                            m('td', ':'),
                            m('td[colspan=3]', Siswa.current.kk),
                        ]),
                        m('tr',
                            m('td',
                                m.trust(' '))),
                        m('tr',
                            m('td[colspan=6]', 'Adalah benar siswa SMK Bhakti Anindya, Kota Tangerang dan pada tanggal 13 Mei 2019 telah dinyatakan lulus')),
                        m('tr',
                            m('td[colspan=6]', 'Berikut hasil belajar siswa tersebut :')),
                        m('tr',
                            m('td',
                                m.trust(' '))),
                        m('tr',
                            m('td[colspan=6]',
                                m('table.nilai', [
                                    m('tr', [
                                        m('th', { style: { width: '5%' } }, 'No.'),
                                        m('th[colspan=2]', 'Mata Pelajaran'),
                                        m('th.long.md:w-1/5', 'Rata-rata Raport Semester 1-6'),
                                        m('th.short.md:w-1/5', 'Raport'),
                                        m('th.long.md:w-1/5', 'Ujian Sekolah Berstandar Nasional'),
                                        m('th.short.md:w-1/5', 'USBN'),
                                        m('th.long.md:w-1/5', 'Ujian Nasional Berbasis Komputer'),
                                        m('th.short.md:w-1/5', 'UNBK'),
                                    ]),
                                    m('tr', [
                                        m('th', 'A.'),
                                        m('th[colspan=5].text-left', 'Normatif'),
                                    ]),
                                    m('tbody.counter',
                                        _map(Siswa.current.hasil_belajar.meta.normatif, (nilai, mapel) => {
                                            if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
                                            if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
                                            if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
                                            return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
                                                m('td.text-right'),
                                                m('td[colspan=2]', component.namaMapel[mapel]),
                                                m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
                                                m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
                                                m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
                                            ]);
                                        })),
                                    m('tr', [
                                        m('th', 'A.'),
                                        m('th[colspan=5].text-left', 'Adaptif'),
                                    ]),
                                    m('tbody.counter',
                                        _map(Siswa.current.hasil_belajar.meta.adaptif, (nilai, mapel) => {
                                            if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
                                            if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
                                            if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
                                            return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
                                                m('td.text-right'),
                                                m('td[colspan=2]', component.namaMapel[mapel]),
                                                m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
                                                m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
                                                m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
                                            ]);
                                        }),
                                        m('tr', [
                                            m('th', 'A.'),
                                            m('th[colspan=5].text-left', 'Produktif'),
                                        ])),
                                    m('tbody.counter',
                                        _map(Siswa.current.hasil_belajar.meta.produktif, (nilai, mapel) => {
                                            if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
                                            if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
                                            if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
                                            return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
                                                m('td.text-right'),
                                                m('td[colspan=2]', component.namaMapel[mapel]),
                                                m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
                                                m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
                                                m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
                                            ]);
                                        })),
                                    m('tr', [
                                        m('th', 'A.'),
                                        m('th[colspan=5].text-left', 'Mulok'),
                                    ]),
                                    m('tbody.counter',
                                        _map(Siswa.current.hasil_belajar.meta.mulok, (nilai, mapel) => {
                                            if (nilai.raport != 0) component.rataRata.raport.push(nilai.raport);
                                            if (nilai.usbn != 0) component.rataRata.usbn.push(nilai.usbn);
                                            if (nilai.unbk != 0) component.rataRata.unbk.push(nilai.unbk);
                                            return nilai.raport == 0 && nilai.usbn == 0 && nilai.unbk == 0 ? null : m('tr', [
                                                m('td.text-right'),
                                                m('td[colspan=2]', component.namaMapel[mapel]),
                                                m('td.text-center', nilai.raport !== 0 ? nilai.raport.toFixed(2) : null),
                                                m('td.text-center', nilai.usbn !== 0 ? nilai.usbn.toFixed(2) : null),
                                                m('td.text-center', nilai.unbk !== 0 ? nilai.unbk.toFixed(2) : null),
                                            ]);
                                        })),
                                    m('tr', [
                                        m('th[colspan=3]', 'Rata-rata'),
                                        m('td.text-center', (component.rataRata.raport.reduce((total, num) => total + num) / component.rataRata.raport.length).toFixed(2)),
                                        m('td.text-center', (component.rataRata.usbn.reduce((total, num) => total + num) / component.rataRata.usbn.length).toFixed(2)),
                                        m('td.text-center', (component.rataRata.unbk.reduce((total, num) => total + num) / component.rataRata.unbk.length).toFixed(2)),
                                    ]),
                                ]))),
                        m('tr',
                            m('td',
                                m.trust(' '))),
                        m('tr',
                            m('td[colspan=6]', 'Demikian Surat Keterangan ini dibuat untuk siswa yang bersangkutan melanjutkan ke jenjang yang lebih tinggi.')),
                    ]),
                    m('table.signature', [
                        m('tr',
                            m('td', 'Tangerang, 13 Mei 2019')),
                        m('tr',
                            m('td', 'Kepala Sekolah,')),
                        m('tr',
                            m('td',
                                m('.letter__sign', { style: { height: '3rem' } }))),
                        m('tr',
                            m('td', 'Drs. Engkos Kosasih, M.M.')),
                    ]),
                ]),
            ]),
        ];
    },
};

export default component;