import { keyValueTableFields } from '@/types'
import { generateId } from '@/tools/util'

export interface User {
  id: string;
  name: string;
  email: string;
  image: string;
}

export const usersList: User[] = [
  {
    id: 'u1',
    name: 'Mary Doe',
    email: 'mary.doe@gmail.com',
    image: 'https://randomuser.me/api/portraits/women/50.jpg',
  },
  {
    id: 'u2',
    name: 'John Clark',
    email: 'john.clark@yahoo.com',
    image: 'https://randomuser.me/api/portraits/men/96.jpg',
  },
  {
    id: 'u3',
    name: 'Mark Smith',
    email: 'mark.smith@gmail.com',
    image: 'https://randomuser.me/api/portraits/men/4.jpg',
  },
  {
    id: 'u4',
    name: 'Dave Wagner',
    email: 'dave.wagner@gmail.com',
    image: 'https://randomuser.me/api/portraits/men/1.jpg',
  },
  {
    id: 'u5',
    name: 'Charlene Ortiz',
    email: 'charlene.ortiz@gmail.com',
    image: 'https://randomuser.me/api/portraits/women/6.jpg',
  },
  {
    id: 'u6',
    name: 'Serenity Chavez',
    email: 'serenity.chavez@gmail.com',
    image: 'https://randomuser.me/api/portraits/women/17.jpg',
  },
];

export interface ComponentInstance {
  name: string
  description: string
  component: string
  tag: string
  instances: any[]
  propDef?: any[]
  tags?: string[]
}

export const formRenderInstance: ComponentInstance = {
  name: 'Form Render',
  description: 'Componente dinamice de tip formular',
  component: 'formRender',
  tag: 'form-render',
  instances: [
    {
      props: {
        fields: [
          {
            id: 'titlu',
            name: 'Formular',
            type: 'title',
            options: [
              {
                id: 'title_size',
                type: 'select',
                value: 'h1',
              }
            ]
          },
          {
            id: 'Camp_textarea',
            name: 'Camp nou 1',
            expanded: false,
            description: '',
            type: 'textarea',
            options: [
              {
                id: 'active_field',
                type: 'boolean'
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              },
              {
                id: 'default_value',
                type: 'text',
                value: 'Aici este un textarea'
              },
              {
                id: 'placeholder',
                type: 'text'
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: 'Camp_text',
            name: 'Camp nou 1',
            expanded: false,
            description: '',
            type: 'text',
            options: [
              {
                id: 'active_field',
                type: 'boolean'
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              },
              {
                id: 'default_value',
                type: 'text',
              },
              {
                id: 'placeholder',
                type: 'text',
                value: 'Aici este un text'
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: 'Camp_color',
            name: 'Camp nou 1',
            expanded: false,
            description: '',
            type: 'color',
            options: [
              {
                id: 'active_field',
                type: 'boolean'
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              },
              {
                id: 'default_value',
                type: 'text',
              },
              {
                id: 'placeholder',
                type: 'text',
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: '7H0XONE3',
            name: 'Camp nou 2',
            expanded: false,
            type: 'title',
            description: '',
            options: [
              {
                id: 'active_field',
                type: 'boolean',
                value: true
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              },
              {
                id: 'title_size',
                type: 'select',
                value: 'h1'
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: 'Camp_numeric',
            name: 'Camp nou 3',
            expanded: false,
            type: 'numeric',
            description: '',
            options: [
              {
                id: 'active_field',
                type: 'boolean'
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              },
              {
                id: 'default_value',
                type: 'text',
                value: '30'
              },
              {
                id: 'placeholder',
                type: 'text'
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: "Camp_checkbox",
            name: "Camp nou 123",
            expanded: false,
            description: "",
            type: "checkbox",
            options: [
              {
                id: "active_field",
                type: "boolean"
              },
              {
                id: "table_display",
                type: "boolean"
              },
              {
                id: "style",
                type: "textarea"
              }
            ],
            values: [
              {
                id: generateId(),
                title: "option 1",
                color: "#ff0000"
              },
              {
                id: generateId(),
                title: "option 2",
                color: "#00ff00"
              },
              {
                id: generateId(),
                title: "option 3",
                color: "#0000ff"
              }
            ],
            actions: []
          },
          {
            id: 'Camp_single_select',
            name: 'Camp nou 120',
            expanded: false,
            description: '',
            type: 'single_select',
            options: [
              {
                id: 'active_field',
                type: 'boolean'
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: 'Camp_multiple_select',
            name: 'Camp nou 120',
            expanded: false,
            description: '',
            type: 'multiple_select',
            options: [
              {
                id: 'active_field',
                type: 'boolean'
              },
              {
                id: 'table_display',
                type: 'boolean'
              },
              {
                id: 'style',
                type: 'textarea'
              }
            ],
            values: [
              {
                id: generateId(),
                title: 'option 1',
                color: '#ff0000'
              },
              {
                id: generateId(),
                title: 'option 2',
                color: '#00ff00'
              },
              {
                id: generateId(),
                title: 'option 3',
                color: '#0000ff'
              }
            ],
            actions: []
          },
          {
            id: "Camp_attachment",
            name: "Camp nou 21",
            expanded: false,
            description: "",
            type: "attachment",
            options: [
              {
                id: "active_field",
                type: "boolean"
              },
              {
                id: "table_display",
                type: "boolean"
              },
              {
                id: "style",
                type: "textarea"
              },
              {
                id: "file_size",
                type: "select",
                value: "256"
              },
              {
                id: "file_count",
                type: "select",
                value: "5"
              },
              {
                id: "extensions",
                type: "text",
                value: "jpg,png,pdf"
              }
            ],
            values: [
              {
                id: generateId(),
                title: "option 1",
                color: "#ff0000"
              },
              {
                id: generateId(),
                title: "option 2",
                color: "#00ff00"
              },
              {
                id: generateId(),
                title: "option 3",
                color: "#0000ff"
              }
            ],
            actions: []
        }
        ]
      },
      
    }
  ],
}

export const formBuilderInstance: ComponentInstance = {
  name: 'Form Builder',
  description: 'Componente dinamice de tip formular',
  component: 'formBuilder',
  tag: 'form-builder',
  instances: [
    { 
      props: {
        title: 'Formular',
        empty: 'Formularul nu contine niciun camp',
        newFieldLabel: 'Camp nou %d',
      },
      value: [
        { id: 'C1', name: 'Camp nou 1', type: 'text'},
      ]
    }
  ],
  propDef: [
    { name: 'title', type: 'string', description: 'Titlul formularului' },
    { name: 'empty', type: 'string', description: 'Text daca formularul e gol' },
    { name: 'newFieldLabel', type: 'string', description: 'Eticheta pentru camp nou', default: 'Camp nou %d'}
  ]
}

export const colorPickerListInstance: ComponentInstance = {
  name: 'Color Picker List',
  description: 'Allow defining a list with colored options',
  component: 'colorPickerList',
  tag: 'color-picker',
  tags: ['color', 'draggable', 'input', 'custom'],

  instances: [
    {
      description: 'List with colored options:',
      props: {
        placeholder: 'Add option...',
      },
      value: [
        { id: '1', title: 'Red', color: '#ff0000' },
        { id: '2', title: 'Green', color: '#00ff00' },
        { id: '3', title: 'Blue', color: '#0000ff' },
      ],
    },
    {
      description: 'List without colors',
      props: {
        placeholder: 'Add label...',
        disableColors: true,
      },
      value: [
        { title: 'Option 1' },
        { title: 'Option 2' },
      ],
    },
    {
      description: 'List with readonly',
      props: {
        placeholder: 'Add option...',
        readonly: true,
      },
      value: [
        { id: '1', title: 'Red', color: '#ff0000' },
        { id: '2', title: 'Green', color: '#00ff00' },
        { id: '3', title: 'Blue', color: '#0000ff' },
      ],
    },
  ],
  propDef: [
    {
      name: 'placeholder',
      description: 'The placeholder text',
      type: 'String',
      default: 'Add item...',
      values: '',
    },
    {
      name: 'modelValue',
      description: 'Option list',
      type: 'Array of { title: string, color?: string }',
      values: '',
    },
    {
      name: 'disableColors',
      description: 'Hides the colors when true',
      type: 'Boolean',
      default: 'false',
      values: '',
    },
    {
      name: 'readonly',
      description: 'Read only mode',
      type: 'Boolean',
      default: 'false',
      values: '',
    }
  ]
}

export const inputTextInstance: ComponentInstance = {
  name: 'Text',
  description:
    'A simple text input that can be used for both text and numeric values.',
  component: 'inputText',
  tag: 'input-text',
  tags: ['text', 'input', 'basic'],
  instances: [
    {
      description: '',
      props: {
        caption: 'Caption',
        description: 'Description',
        placeholder: 'Placeholder',
      },
    },
    {
      description: 'Specifying a mandatory input field:',
      props: {
        caption: 'Phone number',
        description: 'Please enter a valid phone number',
        mandatory: true,
      },
      value: '(555) 345-234-2322',
    },
    {
      description: 'Numeric field with a suffix:',
      props: {
        caption: 'Product price',
        description: 'Please enter a product price',
        type: 'number',
        append: 'EUR',
      },
        value: 123.4,
    },
    {
      description: 'Disabled state:',
      props: {
        caption: 'Handle',
        description: 'Product handle is not editable',
        disabled: true,
      },
      value: 'HFC394223',
    },
  ],
  propDef: [
    {
      name: 'caption',
      description: 'The field caption text',
      type: 'String',
      values: '',
    },
    {
      name: 'description',
      description: 'The field description text',
      type: 'String',
      values: '',
    },
    {
      name: 'placeholder',
      description: 'The field placeholder text',
      type: 'String',
      values: '',
    },
    {
      name: 'id',
      description:
        'Specify a field Id, otherwise a random one will be generated',
      type: 'String',
      values: '',
    },
    {
      name: 'mandatory',
      description:
        'Specify if the field should be marked as mandatory or not',
      type: 'Boolean',
      values: '',
      default: 'false',
    },
    {
      name: 'type',
      description: 'Specify a field type',
      type: 'String',
      values: 'text | number',
      default: 'text',
    },
    {
      name: 'append',
      description: 'Specify a field suffix',
      type: 'String',
      values: '',
    },
    {
      name: 'disabled',
      description: 'Specify if the field should be read only',
      type: 'Boolean',
      values: '',
      default: 'false',
    },
  ],
}

export const textareaInstance: ComponentInstance = {
  name: 'Textarea',
  description: 'A simple textarea input.',
  component: 'inputTextarea',
  tag: 'input-textarea',
  tags: ['text', 'input', 'textarea', 'basic'],
  instances: [
    {
      description: '',
      props: {
        caption: 'Caption',
        description: 'Description',
        placeholder: 'Placeholder',
      },
    },
    {
      description: 'Disabled state:',
      props: {
        caption: 'Caption',
        description: 'Description',
        placeholder: 'Placeholder',
        disabled: true,
      },
    },
    {
      description: 'Textarea input with a maximum length',
      props: {
        caption: 'Caption',
        description: 'Description',
        placeholder: 'Placeholder',
        allowmaxLength: true,
      },
    },
  ],
  propDef: [
    {
      name: 'caption',
      description: 'The field caption text',
      type: 'String',
      values: '',
    },
    {
      name: 'description',
      description: 'The field description text',
      type: 'String',
      values: '',
    },
    {
      name: 'placeholder',
      description: 'The field placeholder text',
      type: 'String',
      values: '',
    },
    {
      name: 'disabled',
      description: 'Specify if the field should be read only',
      type: 'Boolean',
      values: '',
      default: 'false',
    },
    {
      name: 'allowmaxLength',
      description: 'Allows the input to have a maximum length',
      type: 'Boolean',
      default: 'false',
      values: '',
    },
    {
      name: 'maxLength',
      description: 'The maximum length of the input(works when allowmaxLength is true)',
      type: 'Numeric',
      values: '',
      default: '500',
    },
  ],
}

export const selectInstance: ComponentInstance = {
  name: 'Select',
  description: 'A single option select input.',
  component: 'inputSelect',
  tag: 'input-select',
  tags: ['text', 'input', 'select', 'basic'],
  instances: [
    {
      description: '',
      props: {
        caption: 'Caption',
        description: 'Description',
        options: [
          { name: 'First Option', value: 'Op1' },
          { name: 'Second Option', value: 'Op2' },
        ],
      },
      value: 'Op1',
    },
    {
      description: 'Select inputs can also be specified as mandatory:',
      props: {
        caption: 'Caption',
        description: 'Description',
        options: [
          { name: 'First Option', value: 'Op1' },
          { name: 'Second Option', value: 'Op2' },
        ],
        mandatory: true,
      },
      value: 'Op1',
    },
    {
      description:
        'Options can also be specified as a string where the individual options are separated by "|"',
      props: {
        caption: 'Department',
        description: 'Please select a department',
        options: 'A|B|C',
      },
      value: 'A',
    },
    {
      description: 'Disabled state:',
      props: {
        caption: 'Caption',
        description: 'This field should not be editable',
        options: 'A|B|C',
        disabled: true,
      },
      value: 'A',
    },
  ],
  propDef: [
    {
      name: 'caption',
      description: 'The field caption text',
      type: 'String',
      values: '',
    },
    {
      name: 'description',
      description: 'The field description text',
      type: 'String',
      values: '',
    },
    {
      name: 'options',
      description: 'The option list',
      type: 'String | Array',
      values:
        'Name & value array items or a string where the options are separated by |',
    },
    {
      name: 'disabled',
      description: 'Specify if the field should be read only',
      type: 'Boolean',
      values: '',
      default: 'false',
    },
  ],
}

export const fieldRenderInstance: ComponentInstance = {
  name: 'Field Render',
  description: 'A single option select input.',
  component: 'fieldRender',
  tag: 'field-render',
  tags: ['text', 'input', 'select', 'advanced'],
  instances: [
    {
      description: 'Simple case, no data added',
      props: {
        fields: keyValueTableFields
      },
    },
    {
      description: 'With data added',
      props: {
        fields: keyValueTableFields
      },
      value: {
        'ni': 'DX82442',
        'ncmf': 123456,
      },
    },
    {
      description: 'With nested data added',
      props: {
        fields: keyValueTableFields
      },
      value: {
        "cons": "2025-06-24",
        "ni": "DX82442",
        "ncmf": 123456,
        "cfatada": "#1b9d76",
        "suprafatau": 23,
        "currency": "780",
        "nif": {
          "rent_type": "Rezidentiala",
          "rent_proc": "10"
        },
        "claterale": [
          "#ff0000",
          "#0000ff",
        ],
      },
    },
  ],
}