import { ClassNames } from '@emotion/react';
import { isPro, turnsTile } from './../Helpers';
const siteKey = turnsTile();

const proData = isPro() === '1' ? 'pro-active' : 'pro-inactive';

const availableFieldsList = [

  /**
   *Text Input
  */
  {
    id: 'text-input',
    name: 'name-text-input',
    label: 'Text Input',
    type: 'text',
    placeholder: 'Enter text...',
    className: 'custom-input',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'text',
    isNew: 'old',
    // Conditional visibility options
    conditionalLogic: {
      enabled: false,
      conditions: [],
      action: 'show' // 'show' or 'hide'
    },
  },


  /**
  * Number Input
  */

  {
    id: 'number-input',
    name: 'number-text-input',
    label: 'Number',
    type: 'number',
    placeholder: 'Enter no...',
    className: 'custom-input',
    required: true,
    pro: proData,
    value: '',
    isNew: 'old',
    min: '',
    max: '',
    // Conditional visibility options
    conditionalLogic: {
      enabled: false,
      conditions: [],
      action: 'show' // 'show' or 'hide'
    },
  },


  /**
    * Email Input
    */
  {
    id: 'email-input',
    name: 'email-text-input',
    label: 'Email',
    type: 'email',
    placeholder: 'Enter email...',
    className: 'custom-input',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'email',
    isNew: 'old',
    // Conditional visibility options
    conditionalLogic: {
      enabled: false,
      conditions: [],
      action: 'show' // 'show' or 'hide'
    },
  },



  /**
  * Image Input
  */

  {
    id: 'image-input',
    name: 'image-text-input',
    label: 'Image',
    type: 'image',
    placeholder: 'Enter image ...',
    className: 'image-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    src: 'https://wpazleen.com/wp-content/themes/wpxperties/assets/img/simple-form/Drag-drop.png',
    width: '150',
    height: '100',
    subtype: 'image',
    isNew: 'old',
  },


  /**
  * Textfield Input
  */

  {
    id: 'text-field',
    name: 'textfield-text-input',
    label: 'Text Field',
    type: 'text',
    placeholder: '',
    className: 'custom-input',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'text',
    isNew: 'old',
  },

  /**
  * Textarea Input
  */

  {
    id: 'text-area',
    name: 'textarea-text-input',
    label: 'Text Area',
    type: 'textarea',
    placeholder: '',
    className: 'custom-input-text-area',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'textarea',
    isNew: 'old',
  },

  /**
  * Radio Input
  */

  {
    id: 'radio-button',
    className: 'radio-inputs',
    label: 'Radio Button',
    type: 'radio',
    required: false,
    name: 'radio-button',
    pro: proData,
    profeature: 'false',
    isNew: 'old',
    options: [
      { label: 'Option 1', value: 'Option 1' },
      { label: 'Option 2', value: 'Option 2' },
    ],
    subtype: 'radio',
    // Conditional visibility options
    conditionalLogic: {
      enabled: false,
      conditions: [],
      action: 'show' // 'show' or 'hide'
    },
  },

  /**
  * Checkbox Input
  */
  {
    id: 'checkbox',
    className: 'checkbox-inputs',
    label: 'Checkbox',
    type: 'checkbox',
    name: 'checkbox-button',
    toggle: false,
    required: false,
    pro: proData,
    profeature: 'false',
    isNew: 'old',
    options: [
      { label: 'Option 1', value: 'Option 1' },
      { label: 'Option 2', value: 'Option 2' },
    ],
    // Conditional visibility options
    conditionalLogic: {
      enabled: false,
      conditions: [],
      action: 'show' // 'show' or 'hide'
    },
  },

  /**
  * Select Input
  */

  {
    id: 'select-input',
    className: 'select-inputs',
    name: 'select-input',
    label: 'Select',
    type: 'select',
    required: false,
    pro: proData,
    isNew: 'old',
    profeature: 'false',
    options: [
      { label: 'Option 1', value: 'Option 1' },
      { label: 'Option 2', value: 'Option 2' },
    ],
    // Conditional visibility options
    conditionalLogic: {
      enabled: false,
      conditions: [],
      action: 'show' // 'show' or 'hide'
    },
  },

  // -----------------------------------------------------//

  /**
  * Custom Captcha Input
  */

  {
    id: 'custom-captcha',
    name: 'custom-captcha-input',
    label: 'Custom Captcha',
    type: 'customcaptcha',
    className: 'custom-captch',
    required: true,
    subtype: 'customcaptcha',
    pro: proData,
    // profeature: 'true',
    // isNew: 'new',
    profeature: 'false',
    isNew: 'old',

  },

  /**
  * Page break
  */
  {
    id: 'page_break_id',
    name: 'page_break_name',
    label: 'Page Break',
    type: 'page_break',
    required: false,
    subtype: 'page_break',
    pro: proData,
    profeature: 'false',
    isNew: 'old',
    // Progress indicator options
    showProgressIndicator: true,
    progressLabel: 'Step',
    progressStyle: 'dots', // 'dots', 'numbers', 'bar'
  },

  /**
   * File Input
   */
  /* {
    id: 'file-input',
    name: 'file-text-input',
    label: 'File Upload',
    className: 'custom-file-upload',
    type: 'file',
    required: false,
    subtype: 'file',
    pro: proData,
    profeature: 'true',
    isNew: 'new',
  }, */


  /**
   * Cloudflare Turnstile
   */
  {
    id: 'simple-form-turnstile',
    name: 'cloudflare-input',
    label: 'Cloudflare Captcha',
    className: 'sf-turnstile-container',
    type: 'cloudflare',
    sitekey: siteKey['siteKey'] ? siteKey['siteKey'] : '',
    // positioned: 'above-btn',
    theme: 'auto',
    btnaccess: 'false',
    size: 'normal',
    error: '',
    required: true,
    subtype: 'cloudflare',
    pro: proData,
    // profeature: 'true',
    // isNew: 'new',

    profeature: 'false',
    isNew: 'old',
  },

  /**
   * E-Signature
   */
  {
    id: 'esignature',
    name: 'esignature-input',
    label: 'E-Signature',
    type: 'esignature',
    className: 'esignature-field',
    required: false,
    subtype: 'esignature',
    pro: proData,
    // profeature: 'true',
    // isNew: 'new',

    profeature: 'false',
    isNew: 'old',
  },

  //-----------------------------------------------------------------//

  /**
  * Range Input
  */
  {
    id: 'range-input',
    name: 'range-text-input',
    label: 'Range',
    type: 'range',
    placeholder: 'Enter range ...',
    className: 'range-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'range',
    isNew: 'old',
  },

  /**
  * week Input
  */
  {
    id: 'week-input',
    name: 'week-text-input',
    label: 'Week Field',
    type: 'week',
    placeholder: 'Enter week...',
    className: 'week-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'week',
    isNew: 'old',
  },
  /**
  * URL Input
  */

  {
    id: 'url-input',
    name: 'url-text-input',
    label: 'URL',
    type: 'url',
    placeholder: 'Enter url...',
    className: 'url-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'url',
    isNew: 'old',
  },

  /**
  * Time Input
  */
  {
    id: 'time-input',
    name: 'time-text-input',
    label: 'Time Field',
    type: 'time',
    placeholder: 'Enter time...',
    className: 'time-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'time',
    isNew: 'old',
  },

  /**
  * Telephone Input
  */

  {
    id: 'tel-input',
    name: 'tel-text-input',
    label: 'Telephone',
    type: 'tel',
    placeholder: 'Enter tel...',
    className: 'tel-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'tel',
    isNew: 'old',
  },

  /**
  * Submit Btn Input
  */

  {
    id: 'submit-btn',
    name: 'submit-btn',
    label: 'Submit',
    type: 'submit',
    placeholder: 'Enter submit ...',
    className: 'submit-btn',
    color: '#fff',
    bgColor: '#0D4C62',
    required: true,
    pro: proData,
    profeature: 'false',
    value: 'Submit',
    subtype: 'submit',
    isNew: 'old',
  },


  /**
   * Button
   */
  {
    id: 'button-input',
    name: 'button-text-input',
    label: 'Button',
    type: 'button',
    placeholder: 'button field...',
    className: 'button-field',
    color: '#fff',
    bgColor: '#0D4C62',
    required: true,
    pro: proData,
    profeature: 'false',
    value: 'Click',
    subtype: 'button',
    isNew: 'old',
  },


  /**
  * Password Input
  */

  {
    id: 'password-input',
    name: 'password-text-input',
    label: 'Password',
    type: 'password',
    placeholder: 'Enter password ...',
    className: 'password-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'password',
    isNew: 'old',
  },

  /**
  * Date Input
  */

  {
    id: 'date-input',
    name: 'date-text-input',
    label: 'Date',
    type: 'date',
    placeholder: 'Enter date ...',
    className: 'date-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'date',
    isNew: 'old',
  },


  /**
  * Date time Input
  */

  {
    id: 'datetime-local-input',
    name: 'datetime-local-text-input',
    label: 'Datetime-local',
    type: 'datetime-local',
    placeholder: 'Enter datetime-local ...',
    className: 'datetime-local-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'datetime-local',
    isNew: 'old',
  },

  /**
  * Color Input
  */

  {
    id: 'color-input',
    name: 'color-text-input',
    label: 'Color',
    type: 'color',
    placeholder: 'Enter color ...',
    className: 'color-field',
    required: true,
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'color',
    isNew: 'old',
  },


  /**
  * Hidden Input
  */

  {
    id: 'text-hidden',
    name: 'hidden-text-input',
    label: 'Hidden Field',
    type: 'hidden',
    placeholder: '',
    className: 'custom-input',
    required: false,
    value: '',
    pro: proData,
    profeature: 'false',
    isNew: 'old',
  },


  //------------------------------------------------------------//

  /**
   *Heading Input
  */
  {
    label: 'Heading',
    content: 'This is Heading 1',
    id: 'heading-input',
    name: 'heading-text-input',
    type: 'heading',
    headingtype: 'h1',
    className: 'heading-input',
    pro: proData,
    profeature: 'false',
    value: '',
    subtype: 'heading',
    isNew: 'old',
  },

  /**
    *label  Input
   */
  {
    label: 'label',
    id: 'label-input',
    name: 'label-text-input',
    type: 'label',
    className: 'label-input',
    for: '',
    content: 'This is Label',
    value: '',
    pro: proData,
    profeature: 'false',
    subtype: 'label',
    isNew: 'old',
  },

  /**
   * Links
   */
  {
    label: 'Links',
    content: 'View',
    id: 'link-ids',
    name: 'link-text',
    type: 'link',
    href: '',
    target: '_blank',// _blank _self
    className: 'link-classes',
    pro: proData,
    profeature: 'false',
    subtype: 'link',
    isNew: 'old',
  },


  /**
   * Video
   */
  {
    label: 'Video',
    content: 'Check the video',
    id: 'video-ids',
    name: 'video-text',
    type: 'video',
    width: '',
    height: '',
    src: '',
    className: 'video-classes',
    pro: proData,
    profeature: 'false',
    subtype: 'video',
    isNew: 'old',
  },

  /**
   * audio 
   */
  {
    label: 'Audio',
    content: 'Check the audio',
    id: 'audio-ids',
    name: 'audio-text',
    type: 'audio',
    width: '',
    height: '',
    src: '',
    className: 'audio-classes',
    pro: proData,
    profeature: 'false',
    subtype: 'audio',
    isNew: 'old',
  },

  /**
   * Iframe 
   */
  {
    label: 'Iframe',
    content: 'Check the Content',
    id: 'iframe-ids',
    name: 'iframe-text',
    type: 'iframe',
    width: '',
    height: '',
    src: 'https://wpazleen.com/simple-form/',
    className: 'iframe-classes',
    pro: proData,
    profeature: 'false',
    subtype: 'iframe',
    isNew: 'old',
  },


  //-----------------------------------------------------------------------------//

];

export default availableFieldsList;