import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PpHttpMethod } from '@penpencil/common';
import { PpForm } from '@penpencil/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  dataSource: any = {
    "platforms": [
      "android",
      "ios"
    ],
    "status": "Active",
    "_id": "620abf005d995632084f00e4",
    "name": "jnjhbnj",
    "organizationId": "5b09189f7285894d9130ccd0",
    "roleId": "5b27bd965842f950a778c6ef",
    "fileId": {
      "baseUrl": "https://d2bps9p1kiy4ka.cloudfront.net/",
      "_id": "620abefc5d995632084f00e3",
      "name": "ef3ba896-4174-436b-97ca-4e0c1927be8d.csv",
      "key": "5b09189f7285894d9130ccd0/b4e5355d-2e17-421e-8595-2ea36bd8afc5.csv",
      "organization": "5b09189f7285894d9130ccd0",
      "createdAt": "2022-02-14T20:43:40.753Z",
      "__v": 0
    },
    "createdBy": "5b09189f7285894d9130ccd2",
    "createdAt": "2022-02-14T20:43:44.723Z",
    "updatedAt": "2022-02-14T20:43:44.723Z",
    "queryData": [],
    "__v": 0,
    "group": {
      "group": {
          "type": [
              "SIGNUP",
              "STORE"
          ],
          "method": "EQUALS_TO"
      }
  }
  };
  formConfig: PpForm = this.initialiseConfig('create');
  mode: string | null;
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) {
    this.mode = 'create';
    if (!this.mode) {
      this.mode = 'edit';
    }
  }

  ngOnInit(): void {
    // this.formConfig = this.initialiseConfig(this.mode);
  }

  // onSubmit(): void {
  //     if(this.mode === 'create') {
  //         this._router.navigateByUrl('/segmentation');
  //     }
  // }

  initialiseConfig(mode: string | null): PpForm {
    return {
      discriminator: 'formConfig',
      columnPerRow: 1,
      formButton: {
        label: 'Submit',
        color: 'accent',
        type: 'raised',
      },
      type: 'create',
      sendAll: true,
      formFields: [
        {
          name: 'name',
          placeholder: 'Enter Title',
          type: 'text',
          defaultValue: this.dataSource?.name || '',
          required: {
            value: true,
            errorMessage: 'Name is required',
          },
        },
        {
          name: 'roleId',
          placeholder: 'Role Type',
          type: 'select',
          defaultValue: this.dataSource?.roleId || [],
          values: [
            {
              value: '5b27bd965842f950a778c6ef',
              viewValue: 'Student',
            },
            {
              value: '5cc95a2e8bde4d66de400b37',
              viewValue: 'Parent',
            },
            {
              value: '5b2b9742764bd519beb90ac2',
              viewValue: 'Teacher',
            }
          ]
        },
        {
          name: 'platforms',
          placeholder: 'Select Platforms',
          type: 'select',
          multipleSelect: true,
          defaultValue: this.dataSource?.platforms || '',
          values: [
            {
              value: 'android',
              viewValue: 'Android'
            },
            {
              value: 'ios',
              viewValue: 'iOS'
            },
            {
              value: 'web',
              viewValue: 'Web'
            }
          ]
        },
        {
          name: 'sheetToggle',
          placeholder: 'Make Segmentation Via Sheet',
          type: 'toggle',
          send: 'notSend',
          defaultValue: this.dataSource?.sheetToggle || false
        },
        {
          name: 'fileId',
          placeholder: 'Upload CSV File',
          type: 'document',
          defaultValue: this.dataSource?.fileId || {},
          file: {
            acceptType: '*/*',
            api: {
              apiPath: 'v1/admin/files',
              method: PpHttpMethod.POST
            },
            apiKey: 'data',
            multipleSelect: false,
            payloadName: 'file'
          }
        },
        {
          name: 'queryData', //Dummy field FOR Test
          placeholder: 'Segmentation Form',
          defaultValue: this.dataSource?.queryData || [],
          type: 'array',
          formArray: {
            deleteButton: {
              type: 'raised',
              color: 'warn',
              label: 'Remove',
              float: 'right'
            },
            addButton: {
              type: 'raised',
              color: 'accent',
              label: 'Add',
              float: 'right'
            }
          },
          displayCondition: {
            type: 'single',
            match: {
              operator: 'equals',
              key: 'sheetToggle',
              value: false
            }
          },
          formFields: [
            {
              name: 'type',
              placeholder: 'Input Type',
              type: 'multicheckbox',
              //defaultValue: this.dataSource?.queryData?.value || [],
              values: [
                {
                  value: 'SIGNUP',
                  viewValue: 'Signup Date'
                },
                {
                  value: 'LAST_LOGIN',
                  viewValue: 'Last Login'
                },
                {
                  value: 'PROGRAM',
                  viewValue: 'Program'
                },
                {
                  value: 'BATCH',
                  viewValue: 'Batch'
                },
                {
                  value: 'STORE',
                  viewValue: 'Store'
                }
              ]
            },
            {
              name: 'method',
              placeholder: 'Method',
              type: 'select',
              values: [
                {
                  value: 'EQUALS_TO',
                  viewValue: 'EQUALS_TO'
                },
                {
                  value: 'NOT_EQUALS_TO',
                  viewValue: 'NOT_EQUALS_TO'
                },
                {
                  value: 'GREATER_THAN',
                  viewValue: 'GREATER_THAN'
                },
                {
                  value: 'LESS_THAN',
                  viewValue: 'LESS_THAN'
                },
                {
                  value: 'BETWEEN',
                  viewValue: 'BETWEEN'
                }
              ],
              displayCondition: {
                type: 'group',
                group: {
                  type: 'or',
                  values: [
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'SIGNUP'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'LAST_LOGIN'
                      }
                    }
                  ]
                }
              }
            },
            {
              name: 'method',
              placeholder: 'Method',
              type: 'select',
              values: [
                {
                  value: 'EQUALS_TO',
                  viewValue: 'EQUALS_TO'
                }
              ],
              displayCondition: {
                type: 'group',
                group: {
                  type: 'and',
                  values: [
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'SIGNUP'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'LAST_LOGIN'
                      }
                    }
                  ]
                }
              },
            },
            {
              name: 'initialDate',
              placeholder: 'Date',
              type: 'date',
              displayCondition: {
                type: 'group',
                group: {
                  type: 'or',
                  values: [
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'SIGNUP'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'LAST_LOGIN'
                      }
                    }
                  ]
                }
              }
            },
            {
              name: 'value',
              placeholder: 'Value',
              type: 'select',
              multipleSelect: true,
              select: {
                type: 'api',
                api: {
                  apiPath: 'v1/admin/programs',
                  method: PpHttpMethod.GET
                },
                apiDataKey: 'data',
                apiValueKey: '_id',
                apiViewValueKey: 'name',
                relativeApiInfo: {
                  queryParams: [
                    {
                      key: 'program',
                      value: 'program'
                    }
                  ]
                }
              },
              displayCondition: {
                type: 'group',
                group: {
                  type: 'and',
                  values: [
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'SIGNUP'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'LAST_LOGIN'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'PROGRAM'
                      }
                    }
                  ]
                }
              }
            },
            {
              name: 'value',
              placeholder: 'Value',
              type: 'select',
              multipleSelect: true,
              select: {
                type: 'api',
                api: {
                  apiPath: 'v1/admin/batches',
                  method: PpHttpMethod.GET
                },
                apiDataKey: 'data',
                apiValueKey: '_id',
                apiViewValueKey: 'name',
                relativeApiInfo: {
                  queryParams: [
                    {
                      key: 'program',
                      value: 'program'
                    }
                  ]
                }
              },
              displayCondition: {
                type: 'group',
                group: {
                  type: 'and',
                  values: [
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'SIGNUP'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'LAST_LOGIN'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'BATCH'
                      }
                    }
                  ]
                }
              }
            },
            {
              name: 'value',
              placeholder: 'Value',
              type: 'select',
              multipleSelect: true,
              select: {
                type: 'api',
                api: {
                  apiPath: 'v1/admin/packages',
                  method: PpHttpMethod.GET
                },
                apiDataKey: 'data',
                apiValueKey: '_id',
                apiViewValueKey: 'name',
                relativeApiInfo: {
                  queryParams: [
                    {
                      key: 'program',
                      value: 'program'
                    }
                  ]
                }
              },
              displayCondition: {
                type: 'group',
                group: {
                  type: 'and',
                  values: [
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'SIGNUP'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'notEquals',
                        key: 'type',
                        value: 'LAST_LOGIN'
                      }
                    },
                    {
                      type: 'single',
                      match: {
                        operator: 'equals',
                        key: 'type',
                        value: 'STORE'
                      }
                    }
                  ]
                }
              }
            },
          ]
        },
        {
          name: 'group', //ONLY FOR Test
          placeholder: 'Segmentation Form group',
          defaultValue: this.dataSource?.group || {},
          type: 'group',
          formFields: [
            {
              name: 'group', //ONLY FOR Test
              placeholder: 'Segmentation Form group',
              // defaultValue: this.dataSource?.queryData || [],
              type: 'group',
              formFields: [
                {
                  name: 'type',
                  placeholder: 'Input Type',
                  type: 'multicheckbox',
                  //defaultValue: this.dataSource?.queryData?.value || [],
                  values: [
                    {
                      value: 'SIGNUP',
                      viewValue: 'Signup Date'
                    },
                    {
                      value: 'LAST_LOGIN',
                      viewValue: 'Last Login'
                    },
                    {
                      value: 'PROGRAM',
                      viewValue: 'Program'
                    },
                    {
                      value: 'BATCH',
                      viewValue: 'Batch'
                    },
                    {
                      value: 'STORE',
                      viewValue: 'Store'
                    }
                  ]
                },
                {
                  name: 'method',
                  placeholder: 'Method',
                  type: 'select',
                  values: [
                    {
                      value: 'EQUALS_TO',
                      viewValue: 'EQUALS_TO'
                    },
                    {
                      value: 'NOT_EQUALS_TO',
                      viewValue: 'NOT_EQUALS_TO'
                    },
                    {
                      value: 'GREATER_THAN',
                      viewValue: 'GREATER_THAN'
                    },
                    {
                      value: 'LESS_THAN',
                      viewValue: 'LESS_THAN'
                    },
                    {
                      value: 'BETWEEN',
                      viewValue: 'BETWEEN'
                    }
                  ],
                  displayCondition: {
                    type: 'group',
                    group: {
                      type: 'or',
                      values: [
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'SIGNUP'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'LAST_LOGIN'
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  name: 'method',
                  placeholder: 'Method',
                  type: 'select',
                  values: [
                    {
                      value: 'EQUALS_TO',
                      viewValue: 'EQUALS_TO'
                    }
                  ],
                  displayCondition: {
                    type: 'group',
                    group: {
                      type: 'and',
                      values: [
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'SIGNUP'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'LAST_LOGIN'
                          }
                        }
                      ]
                    }
                  },
                },
                {
                  name: 'initialDate',
                  placeholder: 'Date',
                  type: 'date',
                  displayCondition: {
                    type: 'group',
                    group: {
                      type: 'or',
                      values: [
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'SIGNUP'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'LAST_LOGIN'
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  name: 'value',
                  placeholder: 'Value',
                  type: 'select',
                  multipleSelect: true,
                  select: {
                    type: 'api',
                    api: {
                      apiPath: 'v1/admin/programs',
                      method: PpHttpMethod.GET
                    },
                    apiDataKey: 'data',
                    apiValueKey: '_id',
                    apiViewValueKey: 'name',
                    relativeApiInfo: {
                      queryParams: [
                        {
                          key: 'program',
                          value: 'program'
                        }
                      ]
                    }
                  },
                  displayCondition: {
                    type: 'group',
                    group: {
                      type: 'and',
                      values: [
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'SIGNUP'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'LAST_LOGIN'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'PROGRAM'
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  name: 'value',
                  placeholder: 'Value',
                  type: 'select',
                  multipleSelect: true,
                  select: {
                    type: 'api',
                    api: {
                      apiPath: 'v1/admin/batches',
                      method: PpHttpMethod.GET
                    },
                    apiDataKey: 'data',
                    apiValueKey: '_id',
                    apiViewValueKey: 'name',
                    relativeApiInfo: {
                      queryParams: [
                        {
                          key: 'program',
                          value: 'program'
                        }
                      ]
                    }
                  },
                  displayCondition: {
                    type: 'group',
                    group: {
                      type: 'and',
                      values: [
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'SIGNUP'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'LAST_LOGIN'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'BATCH'
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  name: 'value',
                  placeholder: 'Value',
                  type: 'select',
                  multipleSelect: true,
                  select: {
                    type: 'api',
                    api: {
                      apiPath: 'v1/admin/packages',
                      method: PpHttpMethod.GET
                    },
                    apiDataKey: 'data',
                    apiValueKey: '_id',
                    apiViewValueKey: 'name',
                    relativeApiInfo: {
                      queryParams: [
                        {
                          key: 'program',
                          value: 'program'
                        }
                      ]
                    }
                  },
                  displayCondition: {
                    type: 'group',
                    group: {
                      type: 'and',
                      values: [
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'SIGNUP'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'notEquals',
                            key: 'type',
                            value: 'LAST_LOGIN'
                          }
                        },
                        {
                          type: 'single',
                          match: {
                            operator: 'equals',
                            key: 'type',
                            value: 'STORE'
                          }
                        }
                      ]
                    }
                  }
                },
              ]
            },
          ]

        }
      ],
      submitApi: {
        apiPath:
          mode === 'create'
            ? 'v1/admin/segmentations'
            : `v1/admin/segmentations/${this.dataSource?._id}`,
        method:
          mode === 'create' ? PpHttpMethod.POST : PpHttpMethod.PUT,
      },
    };
  }
}