import { Bidang } from '@/komponen/Bidang';
import { InputAngka } from '@/komponen/InputAngka';
import { InputKapital } from '@/komponen/InputKapital';
import { PilihTanggal } from '@/komponen/PilihTanggal';
import { tanggalIndonesia } from '@/lib/format';
import type { Tahap } from '@/tipe/model';

interface Props {
    tahap: Tahap;
    nomor: number;
    total: number;
    nisnWajib: boolean;
    lahirMin: string;
    lahirMaks: string;
    tanggalLahir: string;
    onTanggalLahirChange: (iso: string) => void;
    /** Penghitung karakter. */
    nikPanjang: number;
    nisnPanjang: number;
    waPanjang: number;
}

export default function TahapDataDiri({
    tahap,
    nomor,
    total,
    nisnWajib,
    lahirMin,
    lahirMaks,
    tanggalLahir,
    onTanggalLahirChange,
    nikPanjang,
    nisnPanjang,
    waPanjang,
}: Props) {
    return (
        <fieldset className="tahap" data-tahap={nomor}>
            <legend className="sr">{nomor}. {tahap.nama}</legend>
            <div className="kepala-tahap">
                <span className="no-tahap">{String(nomor).padStart(2, '0')}</span>
                <div><h2>{tahap.nama}</h2><small>Sesuai Kartu Keluarga &amp; akta</small></div>
                <span className="urut">{nomor} / {total}</span>
            </div>

            <Bidang id="nik" label="NIK" wajib ikon="id"
                bantuan="16 digit sesuai Kartu Keluarga."
                hitung="nik" hitungNilai={nikPanjang} hitungMaks={16} hitungMin={16}>
                <InputAngka id="nik" name="nik" autoComplete="off"
                    maxLength={16} minLength={16} pattern="[0-9]{16}" placeholder="16 digit NIK"
                    required />
            </Bidang>

            <Bidang id="nama" label="Nama lengkap" wajib ikon="user"
                bantuan="Gunakan nama lengkap sesuai Kartu Keluarga.">
                <InputKapital id="nama" name="nama"
                    maxLength={100} autoComplete="off" placeholder="Sesuai dokumen resmi" required />
            </Bidang>

            <div className="bidang">
                <span className="label" id="label-jenis-kelamin">Jenis kelamin <span className="wajib">*</span></span>
                <div className="segmen" role="radiogroup" aria-labelledby="label-jenis-kelamin">
                    <label className="opsi">
                        <input id="jenis-kelamin-l" name="jenis_kelamin" type="radio" value="L" required />
                        <span className="ik"><svg width="18" height="18"><use href="#i-user" /></svg></span>Laki-laki
                    </label>
                    <label className="opsi">
                        <input id="jenis-kelamin-p" name="jenis_kelamin" type="radio" value="P" required />
                        <span className="ik"><svg width="18" height="18"><use href="#i-user" /></svg></span>Perempuan
                    </label>
                </div>
            </div>

            <Bidang id="nisn" label={<>NISN {nisnWajib ? <span className="wajib">*</span> : <span className="opsional">(opsional)</span>}</>}
                ikon="id" bantuan="10 digit. Boleh dikosongkan jika belum mengetahui NISN."
                hitung="nisn" hitungNilai={nisnPanjang} hitungMaks={10} hitungMin={10}>
                <InputAngka id="nisn" name="nisn" autoComplete="off"
                    maxLength={10} minLength={10} pattern="[0-9]{10}" placeholder="10 digit NISN"
                    {...(nisnWajib ? { required: true } : {})} />
            </Bidang>

            <div className="grup">
                <p className="grup-judul">Kelahiran &amp; kontak</p>
                <div className="dua">
                    <Bidang id="tempat-lahir" label="Tempat lahir" wajib ikon="pin">
                        <InputKapital id="tempat-lahir" name="tempat_lahir"
                            maxLength={50} autoComplete="off"
                            placeholder="Contoh: Blora" required />
                    </Bidang>
                    <div className="bidang">
                        <label className="label" htmlFor="tanggal-lahir">Tanggal lahir <span className="wajib">*</span></label>
                        <PilihTanggal
                            nilai={tanggalLahir}
                            onChange={onTanggalLahirChange}
                            min={lahirMin}
                            maks={lahirMaks}
                        />
                        {/* Rentang berasal dari server (usia 12-25 tahun per 1 Juli), jadi
                            tanggal sekarang memang di luar batas dan tampak nonaktif. */}
                        <div className="bantuan">
                            <span>Dipilih antara {tanggalIndonesia(lahirMin)} dan {tanggalIndonesia(lahirMaks)}.</span>
                        </div>
                    </div>
                </div>
                <Bidang id="whatsapp" label="WhatsApp" wajib ikon="phone"
                    bantuan="Nomor calon murid atau orang tua. Hanya angka, 10 sampai 13 digit."
                    hitung="whatsapp" hitungNilai={waPanjang} hitungMaks={13} hitungMin={10}>
                    <InputAngka id="whatsapp" name="whatsapp" type="tel"
                        minLength={10} maxLength={13} pattern="[0-9]{10,13}" autoComplete="off"
                        placeholder="08xxxxxxxxxx"
                        data-pesan="Nomor WhatsApp harus 10 sampai 13 angka." required />
                </Bidang>
            </div>
        </fieldset>
    );
}