import { nanoid } from '$lib/@iioioo_utils/Services/nanoid';
import type { IFieldBase } from './field.types'; import { FieldBase } from './field.types'; 

export interface IChoiceCustomOption {
    customType: string; // Note --> this denotes the type: emoji, component etc
    key: string; // Note --> this corresponds to the option it is intended to represent  
    value: string; // Note --> this is the actual thing 
}

export class ChoiceOption {

    key = nanoid();
    faceValue = '';
    richValue = null; 

    constructor( choiceOption: Partial<ChoiceOption> ){
        this.key = choiceOption.key ?? this.key;
        this.faceValue = choiceOption.faceValue ?? '';
        this.richValue = choiceOption.richValue ?? null; 
    }
}

export interface IChoice extends IFieldBase {
    
    data: string | any[];
    
    dataKeySourceId: string;
    dataSourceId: string;
    dataSourceUrl: string;
    dataKey: string; 
    dataRegistry: Record<string, any[]>;
    
    scale?: string[];
    customVisuals?: Record<string, IChoiceCustomOption>; 
    value: any[]
    buildOptions: ( data: any ) => ChoiceOption[]
}

export class ChoiceModel extends FieldBase implements IChoice {

    type = "choice";
    subType = 'radio';
    data: any[] = [];
    scale = [];
    dataRegistry = null;
    
    dataKeySourceId: string;
    dataSourceId: string;
    dataSourceUrl: string;
    dataKey: string; 
    

    value = []; 

    constructor(choice: Partial<ChoiceModel>) {
        super(choice);
        
        this.subType = choice.subType ? choice.subType : this.subType;
        this.scale = choice.scale ? choice.scale : this.scale;
        
        this.dataKeySourceId = choice.dataKeySourceId || this.dataKeySourceId;
        this.dataSourceId = choice.dataSourceId || this.dataSourceId;
        this.dataSourceUrl = choice.dataSourceUrl || this.dataSourceUrl;
        this.dataKey = choice.dataKey || this.dataKey;
        this.dataRegistry = choice.dataRegistry || this.dataRegistry;
        
        // TODO: maybe clean data's type 
        this.data = choice.data || []; 
        // this.options = this.buildOptions( choice.data );
        
        this.value = !!(choice.value && choice.value.length) ? choice.value : [];
    }

    buildOptions = ( data: any[] | string ) => {
        
        if(typeof data === 'string' && this.dataRegistry) {
            data = this.dataRegistry[ data ]; 
        }

        if(Array.isArray(data)) {
            return data.map(d => new ChoiceOption({ 
                faceValue: !!this.dataKey ? d[this.dataKey]: d, 
                richValue: d 
            }))
        } 
        else {
            return []; 
        };  
        
        // return Array.isArray(data) ? data.map(d => new ChoiceOption({ 
        //     faceValue: !!this.dataKey ? d[this.dataKey]: d, 
        //     richValue: d 
        // })) : [];  
    };

}

// SCHEMA 
export interface ChoiceStateScaffold {
    ready: {};
}

export interface ChoiceStates extends ChoiceStateScaffold {
    ready: {}
}

// EVENTS that the machine handles
export type Choice_Event_Load = { type: 'LOAD_OPTIONS'; data: any[] }; 
export type Choice_Event_Select = { type: 'SELECT'; choice: ChoiceOption };

export type ChoiceEvent =
| Choice_Event_Load
| Choice_Event_Select

export interface ChoiceEventsScaffold {
    'LOAD_OPTIONS': Function,
    'SELECT': Function
} 

// CONTEXT
export interface ChoiceContext {
    field: IChoice;
    linkedTo: string;
    active: ChoiceOption;
}

interface ChoiceContextUndefined {
    field: undefined;
    linkedTo: undefined;
    active: undefined;
}

export interface ChoiceStateSchema { initial: string; context: ChoiceContext; states: ChoiceStates };

// export type ChoiceState =
// {
//     value: 'ready';
//     context: ChoiceContext & ChoiceContextUndefined;
// };