import * as Yup from "yup";
import React from "react";

type InputNames = "username" | "email" | "question" | "discord" | "pc_requirements" | "age" | "pronoun" | "join_date" |
    "avg_time" | "available_days" | "available_time" | "staff_experience" | "plugin_experience" | "why_staff" |
    "expectations_mod" | "other";

export interface Step {
    label: string;
    name: InputNames;
    type: "text" | "email" | "textarea" | "date" | "dropdown" | "select";
    min_length: number;
    max_length: number;
    required: boolean;
    additional_info?: string;
    drop_down?: string[]
    multiple?: boolean
}

export interface UserInput {
    [key: string]: string;
}

export type FormData = {
    steps: Step[];
    backend: string;
    userInput: UserInput;
    spec: Yup.Schema<any>;
    title: string;
}

export interface FormProperties {
    path: string
    formData: FormData;
}

export type FormHandlerProps = {
    steps: Step[];
    currentStep: number;
    handleChange: (event: React.ChangeEvent<any>) => void;
    setFieldTouched: (name: string) => void;
    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
    values: UserInput;
    prevLength: number;
    setPrevLength: (len: number) => void;
};