import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import xpath from "xpath";

import {
    Textfield,
    DateField,
    DateFieldPicker,
    YesNofield,
    PickList,
    MultiLinefield,
    NumericField,
    ReadOnlyfield,
    DecimalField,
} 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) => {
        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}
                    />
                );
                break;
            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
                return (
                    <YesNofield
                        name={props.datafieldname}
                        label={props.label}
                    />
                );
                break;
            case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
                return (
                    <Textfield
                        name={props.datafieldname}
                        label={props.label}
                        props={props}
                        ticketnumber={
                            props.props.props.appealType.caseReference
                                .ticketnumber
                        }
                    />
                );
                break;
            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
                return (
                    <DateFieldPicker
                        name={props.datafieldname}
                        label={props.label}
                    />
                );
                break;
            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
                return (
                    <MultiLinefield
                        name={props.datafieldname}
                        label={props.label}
                    />
                );
                break;
            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
                return (
                    <NumericField
                        name={props.datafieldname}
                        label={props.label}
                    />
                );
                break;
            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
                return (
                    <DecimalField
                        name={props.datafieldname}
                        label={props.label}
                    />
                );
                break;
            default:
                return (
                    <Textfield name={props.datafieldname} label={props.label} />
                );
        }
    };

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