import type { Action, ButtonAction } from "./action"

export const ComponentType = {
    Button: "button",
    Text: "text",
    TextField: "textField",
    Table: "table"
} as const;

export type ComponentType = typeof ComponentType[keyof typeof ComponentType];

export interface UIData {
    posX: number,
    posY: number,
    width: number,
    height: number
}

export interface TextGeneralData {
    text: string
}

export interface ButtonGeneralData {
    text: string
}

export interface TextFieldGeneralData {
    text: string
}

export interface TableGeneralData {
    referenceTableName: string,
    columns: string[]
}

export type GeneralData = TextGeneralData | ButtonGeneralData | TextFieldGeneralData | TableGeneralData

export interface ComponentData {
    _id: string,
    projectId: string
    screenId: string,
    name: string,
    type: ComponentType,
    uiData: UIData,
    index: number,
    generalData: GeneralData
    style: { [k: string]: string },
    action?: Action
}



export type Component = ButtonComponent | TextComponent | TextFieldComponent | TableComponent

export interface ButtonComponent {
    id: string
    screenId: string,
    name: string,
    type: "button",
    uiData: UIData,
    index: number,
    generalData: ButtonGeneralData,
    style: { [k: string]: string },
    action?: ButtonAction
}

export interface TextComponent {
    id: string
    screenId: string,
    name: string,
    type: "text",
    uiData: UIData,
    index: number,
    generalData: TextGeneralData,
    style: { [k: string]: string },
}

export interface TextFieldComponent {
    id: string
    screenId: string,
    name: string,
    type: "textField",
    uiData: UIData,
    index: number,
    generalData: TextFieldGeneralData,
    style: { [k: string]: string },
}

export interface TableComponent {
    id: string
    screenId: string,
    name: string,
    type: "table",
    uiData: UIData,
    index: number,
    generalData: TableGeneralData,
    style: { [k: string]: string },
}

export function fromComponentData(componentData: ComponentData): Component {
    switch (componentData.type) {
        case ComponentType.Button:
            return {
                id: componentData._id,
                screenId: componentData.screenId,
                name: componentData.name,
                type: componentData.type,
                uiData: componentData.uiData,
                index: componentData.index,
                generalData: componentData.generalData as ButtonGeneralData,
                style: componentData.style,
                action: componentData.action ? componentData.action : undefined
            }
        case ComponentType.Text:
            return {
                id: componentData._id,
                screenId: componentData.screenId,
                name: componentData.name,
                type: componentData.type,
                uiData: componentData.uiData,
                index: componentData.index,
                generalData: componentData.generalData as TextGeneralData,
                style: componentData.style,
            }
        case ComponentType.TextField:
            return {
                id: componentData._id,
                screenId: componentData.screenId,
                name: componentData.name,
                type: componentData.type,
                uiData: componentData.uiData,
                index: componentData.index,
                generalData: componentData.generalData as TextFieldGeneralData,
                style: componentData.style,
            }
        case ComponentType.Table:
            return {
                id: componentData._id,
                screenId: componentData.screenId,
                name: componentData.name,
                type: componentData.type,
                uiData: componentData.uiData,
                index: componentData.index,
                generalData: componentData.generalData as TableGeneralData,
                style: componentData.style,
            }
    }
}