import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import {
    CheckBoxfield,
    DateFieldPicker,
    DecimalField,
    FieldArrayForm,
    FileUploadField,
    MultiLinefield,
    NumericField,
    PickList,
    Radiofield,
    ReadOnlyfield,
    RichMultiLinefield,
    Textfield,
    YesNofield,
} from "../elements";

export default function BuildField(props) {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const { fieldType, label, datafieldname, mandatoryFieldData } = props;
    const parser = new DOMParser();

    const whichFieldType = (classid) => {
        //console.log(props.datafieldname, classid);

        switch (classid) {
            case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
                return (
                    <ReadOnlyfield
                        name={props.datafieldname}
                        label={props.label}
                        value={
                            props.props.props.appealType.caseReference
                                .ticketnumber
                        }
                        props={props}
                        ticketnumber={
                            props.props.props.appealType.caseReference
                                .ticketnumber
                        }
                    />
                );
                break;
            case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
                return (
                    <PickList
                        name={props.datafieldname}
                        label={props.label}
                        datafieldname={props.datafieldname}
                        picklistData={props.picklistData}
                        validation={props.validation}
                        hint={props.hint}
                    />
                );
                break;
            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
                return (
                    <YesNofield
                        name={props.datafieldname}
                        label={props.label}
                        requiredDocumentValue={props.requiredDocumentValue}
                        requiredDocumentLabel={props.requiredDocumentLabel}
                        validation={props.validation}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                    />
                );
                break;
            case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
                return (
                    <Radiofield
                        name={props.datafieldname}
                        label={props.label}
                        datafieldname={props.datafieldname}
                        options={props.datafieldcontent}
                        inline={false}
                        hint={props.hint}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        validation={props.validation}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                        requiredDocumentValue={props.requiredDocumentValue}
                        requiredDocumentLabel={props.requiredDocumentLabel}
                    />
                );
                break;
            case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
                const required = (value) =>
                    value ? undefined : t("newappeal:is-required-label");

                return (
                    <Textfield
                        name={props.datafieldname}
                        label={props.label}
                        props={props}
                        ticketnumber={
                            props.props.props.appealType.caseReference
                                .ticketnumber
                        }
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        validation={props.validation}
                        hint={props.hint}
                        maxFieldLength={props.maxFieldLength}
                    />
                );
                break;
            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
                return (
                    <DateFieldPicker
                        name={props.datafieldname}
                        label={props.label}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        validation={props.validation}
                        dateStart={props.dateStart}
                        dateEnd={props.dateEnd}
                        hint={props.hint}
                    />
                );
                break;
            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
                return (
                    <MultiLinefield
                        name={props.datafieldname}
                        label={props.label}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        validation={props.validation}
                        maxFieldLength={props.maxFieldLength}
                        hint={props.hint}
                    />
                );
                break;
            case "{E0DECE4B-6666-4a8f-A065-082708572369}":
                return (
                    <RichMultiLinefield
                        name={props.datafieldname}
                        label={props.label}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        validation={props.validation}
                        maxFieldLength={props.maxFieldLength}
                        hint={props.hint}
                    />
                );
                break;
            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
                return (
                    <NumericField
                        name={props.datafieldname}
                        label={props.label}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        validation={props.validation}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        maxFieldLength={props.maxFieldLength}
                    />
                );
                break;
            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
                return (
                    <DecimalField
                        name={props.datafieldname}
                        label={props.label}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        validation={props.validation}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        maxFieldLength={props.maxFieldLength}
                    />
                );
                break;
            case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
                return (
                    <div className="govuk-!-margin-bottom-9">
                        <FileUploadField
                            name={props.datafieldname}
                            label={props.label}
                            ticketnumber={
                                props.props.props.props.appealType.caseReference
                                    .ticketnumber
                            }
                            documentTypeCode={props.documentTypeCode}
                            hint={props.hint}
                            fileList={
                                props.props.props.props.appealType.fileList
                            }
                            setFilesForAppeal={
                                props.props.props.setFilesForAppeal
                            }
                            containerID={
                                props.props.props.props.accountDetails
                                    .containerID
                            }
                            uploadCount={props.uploadCount}
                            setFileCount={props.props.setFileCount}
                            setUploadCount={props.setUploadCount}
                            props={props.props.props.props}
                        />
                    </div>
                );
                break;

            case "{0273EDBD-AC1D-40d3-9FB2-095C621B552D}":
                return (
                    <FieldArrayForm
                        name={props.datafieldname}
                        label={props.label}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        maxSubField={props.maxSubField}
                    />
                );
            case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
                return (
                    <CheckBoxfield
                        name={props.datafieldname}
                        label={props.label}
                        props={props}
                        form={props.props.props.form}
                        formProps={props.props.props.props.form}
                        parentField={props.parentField}
                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                        validation={props.validation}
                    />
                );
                break;
            default:
                return (
                    <Textfield name={props.datafieldname} label={props.label} />
                );
        }
    };

    return (
        <div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
    );
}