export interface FormConfig {
  name: string; // required
  type: string; // required
  id: string; // required

  isPassword?: boolean; // required if type is password and you'll use show hide for password
  eyeShow?: string; // if wanna change img of show password
  eyeHide?: string; // if wanna change img of hide password
  iconUrl?: string; // if user wanna put icon inside input

  label?: string; // require id if using with radio or checkbox
  options?: options[]; // required if type = radio
  value?: string | boolean | number;
  isRequired?: boolean;
  placeholder?: string;
  pattern?: string | RegExp;

  inputFileAccepts?: string;
  imgPickerBtnText?: string;

  // select with input custom type
  selectName?: string;
  inputName?: string;
  inputValue?: string | number;
  selectValue?: string | number;

  minLength?: string | number;
  maxLength?: string | number;
  autocomplete?: string | any;
}
export interface options {
  name: string;
  value: any;
  isDisabled?: boolean;
}

  email: FormConfig = {
    name: 'email',
    type: 'text',
    id: 'test',
    label: 'Email',
    isRequired: true,
    placeholder: 'Enter Your Email',
    pattern: new RegExp(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/),
  };

  password: FormConfig = {
    name: 'password',
    type: 'password',
    id: 'password',
    label: 'Password',
    isRequired: true,
    placeholder: 'Enter Your Password',
    maxLength: '15',
    isPassword: true, // required to enable show and hide functionalities
    eyeShow: '', // img for password to automatically show password
    eyeHide: '', // img for password to automatically hide password
  };

    description: FormConfig = {
    name: 'description',
    type: 'textarea',
    id: 'description',
    label: 'Description',
    isRequired: true,
    placeholder: 'Enter Your Bio',
  };

  age: FormConfig = {
    name: 'age',
    type: 'number',
    id: 'age',
    label: 'Enter Your Age',
    isRequired: true,
    placeholder: 'Enter Your Age',
  };

  country: FormConfig = {
    name: 'country',
    type: 'select',
    options: [
      { name: 'United Kindom', value: 'UK', isDisabled: true },
      { name: 'Egypt', value: 'EG', isDisabled: true },
      { name: 'Saudi Arabia', value: 'KSA' },
      { name: 'Emirates', value: 'UAE' },
      { name: 'Qatar', value: 'QA' },
    ],
    label: 'Select Your Country',
    id: 'country',
    isRequired: true,
    value: 'EG',
  };

  checkbox: FormConfig = {
    name: 'accept',
    type: 'checkbox',
    isRequired: true,
    label: 'Do You Accept Our Terms & Conditions?',
    id: 'accept',
    value: true,
  };

  work: FormConfig = {
    name: 'work',
    type: 'radio',
    id: 'work',
    label: "What's Your Current Work Type",
    isRequired: true,
    options: [
      { name: 'From Home', value: 'home' },
      { name: 'From Office', value: 'office' },
    ],
    value: 'home',
  };

  color: FormConfig = {
    name: 'color',
    type: 'color',
    id: 'color',
    label: "What's your favorite color?",
  };

  range: FormConfig = {
    name: 'range',
    type: 'range',
    id: 'range',
    label: 'How excited are you?',
    value: '20',
  };

  time: FormConfig = {
    name: 'time',
    type: 'time',
    id: 'time',
    label: 'Select Time',
  };

  // custom type
  PhoneWithSelectCountry: FormConfig = {
    name: 'phone-with-country',
    type: 'select-with-input',
    id: 'select-with-input',
    selectName: 'phone-select',
    inputName: 'phone-input',
    label: 'Phone Number',
    options: [
      { name: '<span>Code with flag</span>', value: '02' },
      { name: '991', value: '991' },
      { name: '996', value: '996' },
    ],
    selectValue: '991',
    inputValue: '123123123',
  };

  ImgUploader: FormConfig = {
    name: 'img',
    type: 'file',
    label: 'Upload Your Img',
    id: 'img',
    imgPickerBtnText: 'Upload',
    inputFileAccepts: 'image/*',
  };

  // with this format you can easily set the value for each input in edit mode for example
  myInputsConfigArray: FormConfig[] = [
    this.email,
    this.password,
    this.age,
    this.country,
    this.checkbox,
    this.work,
    this.color,
    this.range,
    this.time,
    this.PhoneWithSelectCountry,
    this.ImgUploader,
  ];

  incomingErrorAfterSubmit = '';
  imgUrl = '';

  getForm(form: FormGroup) {
    console.log(form.value);
    // Api calls for data
    // if error
    this.incomingErrorAfterSubmit = 'Invalid Data';
  }

  detectChangeInForm(form: FormGroup) {
    // any change in the form it will be log here
    console.log(form.value);
  }

  getFileData(event: any) {
    // if user upload a file (ex. image) it will be converted into a file and base64 Url
    // and it will be logged {file:File , base64Url: ''}
    console.log(event);
    this.imgUrl = event.base64Url;
  }