/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React, { Fragment, useEffect, useState, useCallback, useMemo } from 'react'
import { CSSTransition } from 'react-transition-group'
import { useHistory, useLocation, Link } from 'react-router-dom'
import dayjs from '@/utils/time'
import {
  API_PROXY_ENDPOINT,
  ISSUE_TYPES_ENDPOINT,
  ISSUE_FIELDS_ENDPOINT,
  BOARDS_ENDPOINT,
} from '@/config/jiraApiProxy'
import { integrationsData } from '@/data/integrations'
import { Divider, Elevation, Card, Intent, Colors } from '@blueprintjs/core'
import {
  Providers,
  ProviderTypes,
  ProviderIcons,
  ConnectionStatus,
  ConnectionStatusLabels,
} from '@/data/Providers'
import Nav from '@/components/Nav'
import Sidebar from '@/components/Sidebar'
// import AppCrumbs from '@/components/Breadcrumbs'
import Content from '@/components/Content'
import { ToastNotification } from '@/components/Toast'

import { DataEntities, DataEntityTypes } from '@/data/DataEntities'
import { NullBlueprint, BlueprintMode } from '@/data/NullBlueprint'
import { NullBlueprintConnection } from '@/data/NullBlueprintConnection'
import { NullConnection } from '@/data/NullConnection'

import {
  WorkflowSteps,
  WorkflowAdvancedSteps,
  DEFAULT_DATA_ENTITIES,
  DEFAULT_BOARDS,
} from '@/data/BlueprintWorkflow'

import useBlueprintManager from '@/hooks/useBlueprintManager'
import usePipelineManager from '@/hooks/usePipelineManager'
import useConnectionManager from '@/hooks/useConnectionManager'
import useBlueprintValidation from '@/hooks/useBlueprintValidation'
import usePipelineValidation from '@/hooks/usePipelineValidation'
import useConnectionValidation from '@/hooks/useConnectionValidation'
import useJIRA from '@/hooks/useJIRA'

import WorkflowStepsBar from '@/components/blueprints/WorkflowStepsBar'
import WorkflowActions from '@/components/blueprints/WorkflowActions'
import ConnectionDialog from '@/components/blueprints/ConnectionDialog'
import CodeInspector from '@/components/pipelines/CodeInspector'
// import NoData from '@/components/NoData'

import DataConnections from '@/components/blueprints/create-workflow/DataConnections'
import DataScopes from '@/components/blueprints/create-workflow/DataScopes'
import DataTransformations from '@/components/blueprints/create-workflow/DataTransformations'
import DataSync from '@/components/blueprints/create-workflow/DataSync'
import AdvancedJSON from '@/components/blueprints/create-workflow/AdvancedJSON'
import AdvancedJSONValidation from '@/components/blueprints/create-workflow/AdvancedJSONValidation'

import { DEVLAKE_ENDPOINT } from '@/utils/config'
import request from '@/utils/request'

// import ConnectionTabs from '@/components/blueprints/ConnectionTabs'

const CreateBlueprint = (props) => {
  const history = useHistory()
  // const dispatch = useDispatch()

  const [blueprintAdvancedSteps, setBlueprintAdvancedSteps] = useState(
    WorkflowAdvancedSteps
  )
  const [blueprintNormalSteps, setBlueprintNormalSteps] =
    useState(WorkflowSteps)
  const [blueprintSteps, setBlueprintSteps] = useState(blueprintNormalSteps)
  const [advancedMode, setAdvancedMode] = useState(false)
  const [activeStep, setActiveStep] = useState(
    blueprintSteps.find((s) => s.id === 1)
  )
  const [activeProvider, setActiveProvider] = useState(integrationsData[0])

  const [enabledProviders, setEnabledProviders] = useState([])
  const [runTasks, setRunTasks] = useState([])
  const [runTasksAdvanced, setRunTasksAdvanced] = useState([])
  const [runNow, setRunNow] = useState(false)
  const [newBlueprintId, setNewBlueprintId] = useState()
  const [existingTasks, setExistingTasks] = useState([])

  const [isValidConfiguration, setIsValidConfiguration] = useState(false)
  const [validationAdvancedError, setValidationAdvancedError] = useState()

  const [connectionDialogIsOpen, setConnectionDialogIsOpen] = useState(false)
  const [managedConnection, setManagedConnection] = useState(
    NullBlueprintConnection
  )

  const [connectionsList, setConnectionsList] = useState([])

  const [dataEntitiesList, setDataEntitiesList] = useState([
    ...DEFAULT_DATA_ENTITIES,
  ])
  const [boardsList, setBoardsList] = useState([])

  const [blueprintConnections, setBlueprintConnections] = useState([])
  const [configuredConnection, setConfiguredConnection] = useState()
  const [dataEntities, setDataEntities] = useState({})
  const [activeConnectionTab, setActiveConnectionTab] = useState()

  const [onlineStatus, setOnlineStatus] = useState([])
  const [showBlueprintInspector, setShowBlueprintInspector] = useState(false)

  const [dataScopes, setDataScopes] = useState([])
  const [dataConnections, setDataConnections] = useState([])
  const [transformations, setTransformations] = useState({})

  const [projectId, setProjectId] = useState([])
  const [projects, setProjects] = useState({})
  const [boards, setBoards] = useState({})
  const [boardId, setBoardId] = useState([])
  const [connectionId, setConnectionId] = useState('')
  const [connections, setConnections] = useState([])
  const [repositories, setRepositories] = useState([])
  const [selectedConnection, setSelectedConnection] = useState()
  const [repositoryName, setRepositoryName] = useState('')
  const [owner, setOwner] = useState('')
  const [gitExtractorUrl, setGitExtractorUrl] = useState('')
  const [gitExtractorRepoId, setGitExtractorRepoId] = useState('')
  const [selectedGithubRepo, setSelectedGithubRepo] = useState()
  const [refDiffRepoId, setRefDiffRepoId] = useState('')
  const [refDiffPairs, setRefDiffPairs] = useState([])
  const [refDiffTasks, setRefDiffTasks] = useState([
    'calculateCommitsDiff',
    'calculateIssuesDiff',
  ])

  const [canAdvanceNext, setCanAdvanceNext] = useState(true)
  const [canAdvancePrev, setCanAdvancePrev] = useState(true)

  const [configuredProject, setConfiguredProject] = useState(
    projects.length > 0 ? projects[0] : null
  )
  const [configuredBoard, setConfiguredBoard] = useState(
    boards.length > 0 ? boards[0] : null
  )

  const activeTransformation = useMemo(() => transformations[configuredProject || configuredBoard?.id], [transformations, configuredProject, configuredBoard?.id])

  const {
    activeConnection,
    // eslint-disable-next-line no-unused-vars
    blueprint,
    // eslint-disable-next-line no-unused-vars
    blueprints,
    name,
    cronConfig,
    customCronConfig,
    // eslint-disable-next-line no-unused-vars
    cronPresets,
    tasks: blueprintTasks,
    settings: blueprintSettings,
    detectedProviderTasks,
    enable,
    mode,
    rawConfiguration,
    setName: setBlueprintName,
    setCronConfig,
    setCustomCronConfig,
    setTasks: setBlueprintTasks,
    setSettings: setBlueprintSettings,
    setDetectedProviderTasks,
    setEnable: setEnableBlueprint,
    setMode: setBlueprintMode,
    setIsManual: setIsManualBlueprint,
    setRawConfiguration,
    // eslint-disable-next-line no-unused-vars
    isFetching: isFetchingBlueprints,
    isSaving,
    createCronExpression: createCron,
    // eslint-disable-next-line no-unused-vars
    getCronSchedule: getSchedule,
    getNextRunDate,
    getCronPreset,
    getCronPresetByConfig,
    saveBlueprint,
    deleteBlueprint,
    isDeleting: isDeletingBlueprint,
    isManual: isManualBlueprint,
    saveComplete: saveBlueprintComplete
  } = useBlueprintManager()

  const {
    pipelineName,
    pipelines,
    runPipeline,
    cancelPipeline,
    fetchPipeline,
    fetchAllPipelines,
    pipelineRun,
    buildPipelineStages,
    isRunning,
    isFetchingAll: isFetchingAllPipelines,
    // eslint-disable-next-line no-unused-vars
    errors: pipelineErrors,
    setSettings: setPipelineSettings,
    setPipelineName,
    // eslint-disable-next-line no-unused-vars
    lastRunId,
    // eslint-disable-next-line no-unused-vars
    allowedProviders,
    // eslint-disable-next-line no-unused-vars
    detectPipelineProviders,
  } = usePipelineManager(null, runTasks)

  const {
    validate: validatePipeline,
    validateAdvanced: validateAdvancedPipeline,
    errors: validationErrors,
    setErrors: setPipelineErrors,
    isValid: isValidPipeline,
    detectedProviders,
    parseJSON
  } = usePipelineValidation({
    enabledProviders,
    pipelineName,
    projectId,
    projects,
    boardId,
    boards,
    owner,
    repositoryName,
    connectionId,
    gitExtractorUrl,
    gitExtractorRepoId,
    refDiffRepoId,
    refDiffTasks,
    refDiffPairs,
    tasks: runTasks,
    tasksAdvanced: runTasksAdvanced,
    advancedMode,
    mode,
    connection: configuredConnection,
    entities: dataEntities,
    rawConfiguration
  })

  const {
    fetchIssueTypes,
    fetchFields,
    fetchBoards,
    boards: jiraApiBoards,
    issueTypes: jiraApiIssueTypes,
    fields: jiraApiFields,
    isFetching: isFetchingJIRA,
    error: jiraProxyError,
  } = useJIRA(
    {
      apiProxyPath: API_PROXY_ENDPOINT,
      issuesEndpoint: ISSUE_TYPES_ENDPOINT,
      fieldsEndpoint: ISSUE_FIELDS_ENDPOINT,
      boardsEndpoint: BOARDS_ENDPOINT,
    },
    configuredConnection
  )

  const {
    testConnection,
    testAllConnections,
    saveConnection,
    fetchConnection,
    allProviderConnections,
    errors: connectionErrors,
    isSaving: isSavingConnection,
    isTesting: isTestingConnection,
    isFetching: isFetchingConnection,
    showError,
    testStatus,
    name: connectionName,
    endpointUrl,
    proxy,
    token,
    initialTokenStore,
    username,
    password,
    provider,
    setActiveConnection,
    setProvider,
    setName,
    setEndpointUrl,
    setProxy,
    setUsername,
    setPassword,
    setToken,
    setInitialTokenStore,
    setTestStatus,
    setTestResponse,
    setAllTestResponses,
    setSaveComplete: setSaveConnectionComplete,
    fetchAllConnections,
    connectionLimitReached,
    clearConnection: clearActiveConnection,
    testResponse,
    testedConnections,
    allTestResponses,
    saveComplete: saveConnectionComplete
  } = useConnectionManager(
    {
      activeProvider,
      connectionId: managedConnection?.connectionId,
    },
    managedConnection && managedConnection?.id !== null
  )

  const {
    validate: validateBlueprint,
    errors: blueprintValidationErrors,
    isValid: isValidBlueprint,
    fieldHasError,
    getFieldError,
  } = useBlueprintValidation({
    name,
    boards,
    projects,
    cronConfig,
    customCronConfig,
    enable,
    tasks: blueprintTasks,
    mode,
    connections: blueprintConnections,
    entities: dataEntities,
    activeStep,
    activeProvider: provider,
    activeConnection: configuredConnection
  })

  const {
    validate: validateConnection,
    errors: connectionValidationErrors,
    isValid: isValidConnection,
  } = useConnectionValidation({
    activeProvider,
    name: connectionName,
    endpointUrl,
    proxy,
    token,
    username,
    password,
  })

  const isValidStep = useCallback((stepId) => { }, [])

  const nextStep = useCallback(() => {
    setActiveStep((aS) =>
      blueprintSteps.find(
        (s) => s.id === Math.min(aS.id + 1, blueprintSteps.length)
      )
    )
  }, [blueprintSteps])

  const prevStep = useCallback(() => {
    setActiveStep((aS) =>
      blueprintSteps.find((s) => s.id === Math.max(aS.id - 1, 1))
    )
    setConfiguredProject(null)
    setConfiguredBoard(null)
  }, [blueprintSteps])

  const testSelectedConnections = useCallback((connections, savedConnection = {}, callback = () => {}) => {
    const runTest = async () => {
      const results = await Promise.all(connections.map(
        c => {
          const testPayload = c.connectionId === savedConnection?.id && c.name === savedConnection?.name ? {
            endpoint: savedConnection?.endpoint,
            username: savedConnection?.username,
            password: savedConnection?.password,
            token: savedConnection?.token,
            proxy: savedConnection?.proxy
          } : {
            endpoint: c.endpoint,
            username: c.username,
            password: c.password,
            token: c.token,
            proxy: c.proxy
          }
          return request.post(`${DEVLAKE_ENDPOINT}/plugins/${c.plugin}/test`, testPayload)
        })
      )
      setOnlineStatus(results.map(r => r))
    }
    if (mode === BlueprintMode.NORMAL && connections.length > 0) {
      runTest()
    }
    callback()
  }, [mode])

  const handleConnectionTabChange = useCallback(
    (tab) => {
      console.log('>> CONNECTION TAB CHANGED', tab)
      const selectedConnection = blueprintConnections.find(
        (c) => c.id === Number(tab.split('-')[1])
      )
      setActiveConnectionTab(tab)
      setActiveProvider(
        integrationsData.find((p) => p.id === selectedConnection.provider)
      )
      setProvider(
        integrationsData.find((p) => p.id === selectedConnection.provider)
      )
      setConfiguredConnection(selectedConnection)
    },
    [blueprintConnections, setProvider]
  )

  const handleConnectionDialogOpen = useCallback(() => {
    console.log('>>> MANAGING CONNECTION', managedConnection)
  }, [managedConnection])

  const handleConnectionDialogClose = useCallback((savedConnection = {}) => {
    fetchAllConnections(false, true)
    testSelectedConnections(blueprintConnections, savedConnection)
    setConnectionDialogIsOpen(false)
    setManagedConnection(NullBlueprintConnection)
    setTestStatus(0)
    setTestResponse(null)
    setAllTestResponses({})
    setInitialTokenStore({})
    clearActiveConnection()
    setActiveConnection(NullConnection)
    // setSaveConnectionComplete(null)
  }, [
    blueprintConnections,
    testSelectedConnections,
    fetchAllConnections,
    clearActiveConnection,
    setActiveConnection,
    setAllTestResponses,
    setInitialTokenStore,
    // setSaveConnectionComplete,
    setTestResponse,
    setTestStatus
  ])

  const handleTransformationCancel = useCallback(() => {
    setConfiguredProject(null)
    setConfiguredBoard(null)
    console.log('>> Cancel Modify - Transformation Settings')
  }, [])

  const handleTransformationClear = useCallback(() => {
    console.log(
      '>>> CLEARING TRANSFORMATION RULES!',
      '==> PROJECT =',
      configuredProject,
      '==> BOARD =',
      configuredBoard
    )
    setTransformations((existingTransformations) => ({
      ...existingTransformations,
      [configuredProject]: {},
      [configuredBoard?.id]: {},
    }))
    setConfiguredProject(null)
    setConfiguredBoard(null)
  }, [setTransformations, configuredProject, configuredBoard])

  const handleBlueprintSave = useCallback(() => {
    console.log('>>> SAVING BLUEPRINT!!')
    setRunNow(false)
    saveBlueprint()
  }, [saveBlueprint])

  const handleBlueprintSaveAndRun = useCallback(() => {
    console.log('>>> SAVING BLUEPRINT & RUNNING NOW!!')
    setRunNow(true)
    saveBlueprint()
  }, [saveBlueprint])

  const getRestrictedDataEntities = useCallback(() => {
    let items = []
    switch (configuredConnection.provider) {
      case Providers.GITLAB:
      case Providers.JIRA:
      case Providers.TAPD:
      case Providers.GITHUB:
        items = dataEntitiesList.filter((d) => d.name !== 'ci-cd')
        break
      case Providers.JENKINS:
        items = dataEntitiesList.filter((d) => d.name === 'ci-cd')
        break
    }
    return items
  }, [dataEntitiesList, configuredConnection])

  const createProviderScopes = useCallback(
    (
      providerId,
      connection,
      connectionIdx,
      entities = [],
      boards = [],
      projects = [],
      transformations = [],
      defaultScope = { transformation: {}, options: {}, entities: [] }
    ) => {
      console.log(
        '>>> CREATING PROVIDER SCOPE FOR CONNECTION...',
        connectionIdx,
        connection
      )
      let newScope = {
        ...defaultScope,
        entities: entities[connection.id]?.map((entity) => entity.value) || [],
      }
      switch (providerId) {
        case Providers.JIRA:
          newScope = boards[connection.id]?.map((b) => ({
            ...newScope,
            options: {
              boardId: Number(b.id),
              // @todo: verify initial value of since date for jira provider
              // since: new Date(),
            },
            transformation: { ...transformations[b.id] },
          }))
          break
        case Providers.GITLAB:
          newScope = projects[connection.id]?.map((p) => ({
            ...newScope,
            options: {
              projectId: Number(p),
            },
            transformation: {},
          }))
          break
        case Providers.JENKINS:
          newScope = {
            ...newScope,
          }
          break
        case Providers.TAPD:
          newScope = {
            ...newScope,
          }
          break
        case Providers.GITHUB:
          newScope = projects[connection.id]?.map((p) => ({
            ...newScope,
            options: {
              owner: p.split('/')[0],
              repo: p.split('/')[1],
            },
            transformation: { ...transformations[p] },
          }))
          break
      }
      return Array.isArray(newScope) ? newScope.flat() : [newScope]
    },
    []
  )

  const manageConnection = useCallback(
    (connection) => {
      console.log('>> MANAGE CONNECTION...', connection)
      if (connection?.id !== null) {
        setActiveProvider(
          integrationsData.find((p) => p.id === connection.provider)
        )
        setProvider(integrationsData.find((p) => p.id === connection.provider))
        // fetchConnection(true, false, connection.id)
        setManagedConnection(connection)
        setConnectionDialogIsOpen(true)
      }
    },
    [setProvider]
  )

  const addProjectTransformation = useCallback((project) => {
    setConfiguredProject(project)
    ToastNotification.clear()
  }, [])

  const addBoardTransformation = useCallback((board) => {
    setConfiguredBoard(board)
    ToastNotification.clear()
  }, [])

  const addConnection = useCallback(() => {
    setManagedConnection(NullBlueprintConnection)
    setConnectionDialogIsOpen(true)
  }, [])

  const setTransformationSettings = useCallback(
    (settings, configuredEntity) => {
      console.log(
        '>> SETTING TRANSFORMATION SETTINGS PROJECT/BOARD...',
        configuredEntity,
        settings
      )
      setTransformations((existingTransformations) => ({
        ...existingTransformations,
        [configuredEntity]: {
          ...existingTransformations[configuredEntity],
          ...settings,
        },
      }))
    },
    [setTransformations]
  )

  const handleTransformationSave = useCallback((settings, entity) => {
    console.log('>> SAVING / CLOSING Transformation Settings')
    // manual @save disabled, reactive auto-saving writes settings to transform object...
    // setTransformationSettings(settings, entity)
    setConfiguredProject(null)
    setConfiguredBoard(null)
    ToastNotification.clear()
    ToastNotification.show({ message: 'Transformation Rules Added.', intent: Intent.SUCCESS, icon: 'small-tick' })
  }, [])

  const handleAdvancedMode = (enableAdvanced = true) => {
    setAdvancedMode(enableAdvanced)
  }

  const isValidCode = useCallback(() => {
    let isValid = false
    try {
      const parsedCode = parseJSON(rawConfiguration)
      isValid = true
      setValidationAdvancedError(null)
    } catch (e) {
      console.log('>> FORMAT CODE: Invalid Code Format!', e)
      isValid = false
      setValidationAdvancedError(e.message)
    }
    setIsValidConfiguration(isValid)
    return isValid
  }, [rawConfiguration, parseJSON])

  useEffect(() => {
    console.log('>> ACTIVE STEP CHANGED: ', activeStep)
    if (mode === BlueprintMode.NORMAL && activeStep?.id === 1) {
      const enableNotifications = false
      const getAllSources = true
      fetchAllConnections(enableNotifications, getAllSources)
    }
    if (mode === BlueprintMode.NORMAL && ([2, 3].includes(activeStep?.id))) {
      fetchBoards()
      fetchIssueTypes()
      fetchFields()
    }
    setBlueprintNormalSteps((bS) => [
      ...bS.map((s) =>
        s.id < activeStep?.id
          ? { ...s, complete: true }
          : { ...s, complete: false }
      ),
    ])
    setBlueprintAdvancedSteps((bS) => [
      ...bS.map((s) =>
        s.id < activeStep?.id
          ? { ...s, complete: true }
          : { ...s, complete: false }
      ),
    ])
  }, [
    activeStep,
    fetchAllConnections,
    fetchBoards,
    fetchFields,
    fetchIssueTypes,
    mode
  ])

  useEffect(() => {
    console.log('>>> ALL DATA PROVIDER CONNECTIONS...', allProviderConnections)
    setConnectionsList(
      allProviderConnections?.map((c, cIdx) => ({
        ...c,
        id: cIdx,
        name: c.name,
        title: c.name,
        value: c.id,
        status:
          ConnectionStatusLabels[c.status] ||
          ConnectionStatusLabels[ConnectionStatus.OFFLINE],
        statusResponse: null,
        provider: c.provider,
        plugin: c.provider,
      }))
    )
  }, [allProviderConnections])

  useEffect(() => {
    console.log(
      '>> PIPELINE RUN TASK SETTINGS FOR PIPELINE MANAGER ....',
      runTasks
    )
    setPipelineSettings({
      name: pipelineName,
      // blueprintId: saveBlueprintComplete?.id || 0,
      plan: advancedMode ? runTasksAdvanced : [[...runTasks]],
    })
    // setRawConfiguration(JSON.stringify(buildPipelineStages(runTasks, true), null, '  '))
    if (advancedMode) {
      validateAdvancedPipeline()
      setBlueprintTasks(runTasksAdvanced)
    } else {
      validatePipeline()
      setBlueprintTasks([[...runTasks]])
    }
  }, [
    pipelineName,
    advancedMode,
    runTasks,
    runTasksAdvanced,
    setPipelineSettings,
    validatePipeline,
    validateAdvancedPipeline,
    setBlueprintTasks,
    // saveBlueprintComplete?.id
  ])

  useEffect(() => {
    console.log(
      '>> BLUEPRINT SETTINGS FOR PIPELINE MANAGER ....',
      blueprintSettings
    )
  }, [blueprintSettings])

  useEffect(() => {
    validateBlueprint()
  }, [
    name,
    cronConfig,
    customCronConfig,
    blueprintTasks,
    connectionsList,
    enable,
    validateBlueprint,
  ])

  useEffect(() => {
    setIsManualBlueprint(cronConfig === 'manual')
  }, [cronConfig, setIsManualBlueprint])

  useEffect(() => { }, [activeConnectionTab])

  useEffect(() => {
    console.log('>>>> MY SELECTED BLUEPRINT CONNECTIONS...', blueprintConnections)
    const someConnection = blueprintConnections.find(c => c)
    if (someConnection) {
      setConfiguredConnection(someConnection)
      setActiveConnectionTab(`connection-${someConnection?.id}`)
      setActiveProvider(
        integrationsData.find((p) => p.id === someConnection.provider)
      )
      setProvider(
        integrationsData.find((p) => p.id === someConnection.provider)
      )
    }
    const getDefaultEntities = (providerId) => {
      let entities = []
      switch (providerId) {
        case Providers.GITHUB:
        case Providers.GITLAB:
          entities = DEFAULT_DATA_ENTITIES.filter((d) => d.name !== 'ci-cd')
          break
        case Providers.JIRA:
          entities = DEFAULT_DATA_ENTITIES.filter((d) => d.name === 'issue-tracking' || d.name === 'cross-domain')
          break
        case Providers.JENKINS:
          entities = DEFAULT_DATA_ENTITIES.filter((d) => d.name === 'ci-cd')
          break
      }
      return entities
    }
    const initializeEntities = (pV, cV) => ({
      ...pV,
      [cV.id]: !pV[cV.id] ? getDefaultEntities(cV?.provider) : [],
    })
    const initializeProjects = (pV, cV) => ({ ...pV, [cV.id]: [] })
    const initializeBoards = (pV, cV) => ({ ...pV, [cV.id]: [] })
    setDataEntities((dE) => ({
      ...blueprintConnections.reduce(initializeEntities, {}),
    }))
    setProjects((p) => ({
      ...blueprintConnections.reduce(initializeProjects, {}),
    }))
    setBoards((b) => ({
      ...blueprintConnections.reduce(initializeBoards, {}),
    }))
    setEnabledProviders([
      ...new Set(blueprintConnections.map((c) => c.provider)),
    ])

    testSelectedConnections(blueprintConnections)
  }, [blueprintConnections, setProvider, testSelectedConnections])

  useEffect(() => {
    console.log('>> CONFIGURING CONNECTION', configuredConnection)
    if (configuredConnection) {
      setConfiguredProject(null)
      setConfiguredBoard(null)
      switch (configuredConnection.provider) {
        case Providers.GITLAB:
        case Providers.GITHUB:
          setDataEntitiesList(
            DEFAULT_DATA_ENTITIES.filter((d) => d.name !== 'ci-cd')
          )
          // setConfiguredProject(projects.length > 0 ? projects[0] : null)
          break
        case Providers.JIRA:
          setDataEntitiesList(
            DEFAULT_DATA_ENTITIES.filter((d) => d.name === 'issue-tracking' || d.name === 'cross-domain')
          )
          break
        case Providers.JENKINS:
          setDataEntitiesList(
            DEFAULT_DATA_ENTITIES.filter((d) => d.name === 'ci-cd')
          )
          break
        default:
          setDataEntitiesList(DEFAULT_DATA_ENTITIES)
          break
      }
    }
  }, [configuredConnection, setActiveConnectionTab])

  useEffect(() => {
    console.log('>> DATA ENTITIES', dataEntities)
  }, [dataEntities])

  useEffect(() => {
    console.log('>> BOARDS', boards)
  }, [boards])

  useEffect(() => {
    setBlueprintSettings((currentSettings) => ({
      ...currentSettings,
      connections: blueprintConnections.map((c, cIdx) => ({
        ...NullBlueprintConnection,
        connectionId: c.value,
        plugin: c.plugin || c.provider,
        scope: createProviderScopes(
          c.provider,
          c,
          cIdx,
          dataEntities,
          boards,
          projects,
          transformations
        ),
      })),
    }))
    // validatePipeline()
  }, [
    blueprintConnections,
    dataEntities,
    boards,
    projects,
    transformations,
    validatePipeline,
    createProviderScopes,
    setBlueprintSettings,
  ])

  useEffect(() => {
    console.log('>> PROJECTS LIST', projects)
    console.log('>> BOARDS LIST', boards)
    const getDefaultTransformations = (providerId) => {
      let transforms = {}
      switch (providerId) {
        case Providers.GITHUB:
          transforms = {
            prType: '',
            prComponent: '',
            issueSeverity: '',
            issueComponent: '',
            issuePriority: '',
            issueTypeRequirement: '',
            issueTypeBug: '',
            issueTypeIncident: '',
            refdiff: null,
          }
          break
        case Providers.JIRA:
          transforms = {
            epicKeyField: '',
            typeMappings: {},
            storyPointField: '',
            remotelinkCommitShaPattern: '',
            bugTags: [],
            incidentTags: [],
            requirementTags: [],
          }
          break
        case Providers.JENKINS:
          // No Transform Settings...
          break
        case Providers.TAPD:
          // No Transform Settings...
          break
        case Providers.GITLAB:
          // No Transform Settings...
          break
      }
      return transforms
    }

    const initializeTransformations = (pV, cV) => ({
      ...pV,
      [cV]: getDefaultTransformations(configuredConnection?.provider),
    })
    const projectTransformation = projects[configuredConnection?.id]
    const boardTransformation = boards[configuredConnection?.id]?.map(
      (b) => b.id
    )
    if (projectTransformation) {
      setTransformations((cT) => ({
        ...projectTransformation.reduce(initializeTransformations, {}),
        // Spread Current/Existing Transformations Settings
        ...cT,
      }))
    }
    if (boardTransformation) {
      setTransformations((cT) => ({
        ...boardTransformation.reduce(initializeTransformations, {}), // @todo: FIXME
        // Spread Current/Existing Transformations Settings
        ...cT,
      }))
    }
  }, [projects, boards, configuredConnection])

  useEffect(() => {
    console.log(
      '>>> SELECTED PROJECT TO CONFIGURE...',
      configuredProject,
    )
    // setActiveTransformation((aT) =>
    //   configuredProject !== null ? transformations[configuredProject] : {}
    // )
    setCanAdvanceNext(!configuredProject)
  }, [configuredProject, setCanAdvanceNext])

  useEffect(() => {
    console.log(
      '>>> SELECTED BOARD TO CONFIGURE...',
      configuredBoard?.id,
    )
    // setActiveTransformation((aT) =>
    //   configuredBoard ? transformations[configuredBoard?.id] : aT
    // )
    setCanAdvanceNext(!configuredBoard)
  }, [configuredBoard, setCanAdvanceNext])

  useEffect(() => {
    console.log('>>> BLUEPRINT WORKFLOW STEPS...', blueprintSteps)
  }, [blueprintSteps])

  useEffect(() => {
    setBlueprintSteps(
      advancedMode ? blueprintAdvancedSteps : blueprintNormalSteps
    )
    setBlueprintMode(
      advancedMode ? BlueprintMode.ADVANCED : BlueprintMode.NORMAL
    )
  }, [
    advancedMode,
    blueprintNormalSteps,
    blueprintAdvancedSteps,
    setBlueprintMode,
  ])

  useEffect(() => {
    if (isValidCode()) {
      setRunTasksAdvanced(JSON.parse(rawConfiguration))
    }
  }, [rawConfiguration, isValidCode])

  useEffect(() => {
    if (saveBlueprintComplete?.id) {
      setNewBlueprintId(saveBlueprintComplete?.id)
    }
  }, [
    saveBlueprintComplete,
    setPipelineSettings,
    setPipelineSettings,
    setNewBlueprintId,
    runNow,
    runPipeline,
    history
  ])

  useEffect(() => {
    if (runNow && newBlueprintId) {
      const newPipelineConfiguration = {
        name: `${saveBlueprintComplete?.name} ${Date.now()}`,
        blueprintId: saveBlueprintComplete?.id,
        plan: saveBlueprintComplete?.plan,
      }
      runPipeline(newPipelineConfiguration)
      setRunNow(false)
      history.push(`/blueprints/detail/${saveBlueprintComplete?.id}`)
    } else if (newBlueprintId) {
      history.push(`/blueprints/detail/${saveBlueprintComplete?.id}`)
    }
  }, [
    runNow,
    saveBlueprintComplete,
    newBlueprintId,
    runPipeline,
    history
  ])

  useEffect(() => {
    console.log('>>> FETCHED JIRA API BOARDS FROM PROXY...', jiraApiBoards)
    setBoardsList(jiraApiBoards)
  }, [jiraApiBoards])

  useEffect(() => {
    if (saveConnectionComplete?.id && connectionDialogIsOpen) {
      handleConnectionDialogClose(saveConnectionComplete)
      // fetchAllConnections(false, true)
      // testSelectedConnections(blueprintConnections, saveConnectionComplete)
    }
    return () => setSaveConnectionComplete(null)
  }, [
    connectionDialogIsOpen,
    saveConnectionComplete,
    fetchAllConnections,
    blueprintConnections,
    testSelectedConnections,
    handleConnectionDialogClose,
    setSaveConnectionComplete
  ])

  useEffect(() => {
    console.log('>>> ONLINE STATUS UPDATED...', onlineStatus)
    setDataConnections(blueprintConnections.map((c, cIdx) => ({
      ...c,
      statusResponse: onlineStatus[cIdx],
      status: onlineStatus[cIdx]?.status
    })))
  }, [onlineStatus, blueprintConnections])

  useEffect(() => {
    setConnectionsList(cList => cList.map((c, cIdx) => ({
      ...c,
      statusResponse: dataConnections.find(dC => dC.id === c.id && dC.provider === c.provider),
      status: dataConnections.find(dC => dC.id === c.id && dC.provider === c.provider)?.status
    })))
    setCanAdvanceNext(dataConnections.every(dC => dC.status === 200))
  }, [dataConnections])

  return (
    <>
      <div className='container'>
        <Nav />
        <Sidebar />
        <Content>
          <main className='main'>
            <WorkflowStepsBar activeStep={activeStep} steps={blueprintSteps} />

            <div
              className={`workflow-content workflow-step-id-${activeStep?.id}`}
            >
              {advancedMode ? (
                <>
                  {activeStep?.id === 1 && (
                    <AdvancedJSON
                      activeStep={activeStep}
                      advancedMode={advancedMode}
                      runTasksAdvanced={runTasksAdvanced}
                      blueprintConnections={blueprintConnections}
                      connectionsList={connectionsList}
                      name={name}
                      setBlueprintName={setBlueprintName}
                      // setBlueprintConnections={setBlueprintConnections}
                      fieldHasError={fieldHasError}
                      getFieldError={getFieldError}
                      // addConnection={addConnection}
                      // manageConnection={manageConnection}
                      onAdvancedMode={handleAdvancedMode}
                      // @todo add multistage checker method
                      isMultiStagePipeline={() => { }}
                      rawConfiguration={rawConfiguration}
                      setRawConfiguration={setRawConfiguration}
                      isSaving={isSaving}
                      isValidConfiguration={isValidConfiguration}
                      validationAdvancedError={validationAdvancedError}
                      validationErrors={validationErrors}
                    />
                  )}

                  {activeStep?.id === 2 && (
                    <DataSync
                      activeStep={activeStep}
                      advancedMode={advancedMode}
                      cronConfig={cronConfig}
                      customCronConfig={customCronConfig}
                      createCron={createCron}
                      setCronConfig={setCronConfig}
                      getCronPreset={getCronPreset}
                      fieldHasError={fieldHasError}
                      getFieldError={getFieldError}
                      setCustomCronConfig={setCustomCronConfig}
                      getCronPresetByConfig={getCronPresetByConfig}
                    />
                  )}
                </>
              ) : (
                <>
                  {activeStep?.id === 1 && (
                    <DataConnections
                      activeStep={activeStep}
                      advancedMode={advancedMode}
                      blueprintConnections={dataConnections}
                      // blueprintConnections={blueprintConnections}
                      // blueprintConnections={[...blueprintConnections.map((c, cIdx) => ({...c, statusResponse: onlineStatus[cIdx], status: onlineStatus[cIdx]?.status }))]}
                      onlineStatus={onlineStatus}
                      connectionsList={connectionsList}
                      name={name}
                      setBlueprintName={setBlueprintName}
                      setBlueprintConnections={setBlueprintConnections}
                      fieldHasError={fieldHasError}
                      getFieldError={getFieldError}
                      addConnection={addConnection}
                      manageConnection={manageConnection}
                      onAdvancedMode={handleAdvancedMode}
                      isTesting={isTestingConnection}
                    />
                  )}

                  {activeStep?.id === 2 && (
                    <DataScopes
                      provider={provider}
                      activeStep={activeStep}
                      advancedMode={advancedMode}
                      activeConnectionTab={activeConnectionTab}
                      blueprintConnections={blueprintConnections}
                      dataEntitiesList={dataEntitiesList}
                      boardsList={boardsList}
                      boards={boards}
                      dataEntities={dataEntities}
                      projects={projects}
                      configuredConnection={configuredConnection}
                      handleConnectionTabChange={handleConnectionTabChange}
                      setDataEntities={setDataEntities}
                      setProjects={setProjects}
                      setBoards={setBoards}
                      prevStep={prevStep}
                      isSaving={isSaving}
                      isRunning={isRunning}
                      validationErrors={[...validationErrors, ...blueprintValidationErrors]}
                    />
                  )}

                  {activeStep?.id === 3 && (
                    <DataTransformations
                      provider={provider}
                      activeStep={activeStep}
                      advancedMode={advancedMode}
                      activeConnectionTab={activeConnectionTab}
                      blueprintConnections={blueprintConnections}
                      dataEntities={dataEntities}
                      projects={projects}
                      boardsList={boardsList}
                      boards={boards}
                      issueTypes={jiraApiIssueTypes}
                      fields={jiraApiFields}
                      configuredConnection={configuredConnection}
                      configuredProject={configuredProject}
                      configuredBoard={configuredBoard}
                      handleConnectionTabChange={handleConnectionTabChange}
                      prevStep={prevStep}
                      addBoardTransformation={addBoardTransformation}
                      addProjectTransformation={addProjectTransformation}
                      transformations={transformations}
                      activeTransformation={activeTransformation}
                      setTransformations={setTransformations}
                      setTransformationSettings={setTransformationSettings}
                      isSaving={isSaving}
                      isSavingConnection={isSavingConnection}
                      isRunning={isRunning}
                      onSave={handleTransformationSave}
                      onCancel={handleTransformationCancel}
                      onClear={handleTransformationClear}
                      fieldHasError={fieldHasError}
                      getFieldError={getFieldError}
                      jiraProxyError={jiraProxyError}
                      isFetchingJIRA={isFetchingJIRA}
                    />
                  )}

                  {activeStep?.id === 4 && (
                    <DataSync
                      activeStep={activeStep}
                      advancedMode={advancedMode}
                      cronConfig={cronConfig}
                      customCronConfig={customCronConfig}
                      createCron={createCron}
                      setCronConfig={setCronConfig}
                      getCronPreset={getCronPreset}
                      fieldHasError={fieldHasError}
                      getFieldError={getFieldError}
                      setCustomCronConfig={setCustomCronConfig}
                      getCronPresetByConfig={getCronPresetByConfig}
                    />
                  )}
                </>
              )}
            </div>

            <WorkflowActions
              activeStep={activeStep}
              blueprintSteps={blueprintSteps}
              advancedMode={advancedMode}
              setShowBlueprintInspector={setShowBlueprintInspector}
              validationErrors={[...validationErrors, ...blueprintValidationErrors]}
              onNext={nextStep}
              onPrev={prevStep}
              onSave={handleBlueprintSave}
              onSaveAndRun={handleBlueprintSaveAndRun}
              isLoading={isSaving || isFetchingJIRA || isFetchingConnection || isTestingConnection}
              isValid={advancedMode ? isValidBlueprint && isValidPipeline : isValidBlueprint}
              canGoNext={canAdvanceNext}
            />
          </main>
        </Content>
      </div>

      <ConnectionDialog
        integrations={integrationsData}
        activeProvider={activeProvider}
        setProvider={setActiveProvider}
        setTestStatus={setTestStatus}
        setTestResponse={setTestResponse}
        connection={managedConnection}
        errors={connectionErrors}
        validationErrors={connectionValidationErrors}
        endpointUrl={endpointUrl}
        name={connectionName}
        proxy={proxy}
        token={token}
        initialTokenStore={initialTokenStore}
        username={username}
        password={password}
        isOpen={connectionDialogIsOpen}
        isTesting={isTestingConnection}
        isSaving={isSavingConnection}
        isValid={isValidConnection}
        onClose={handleConnectionDialogClose}
        onOpen={handleConnectionDialogOpen}
        onTest={testConnection}
        onSave={saveConnection}
        onValidate={validateConnection}
        onNameChange={setName}
        onEndpointChange={setEndpointUrl}
        onProxyChange={setProxy}
        onTokenChange={setToken}
        onUsernameChange={setUsername}
        onPasswordChange={setPassword}
        testStatus={testStatus}
        testResponse={testResponse}
        allTestResponses={allTestResponses}
      />

      <CodeInspector
        title={name}
        titleIcon='add'
        subtitle='JSON CONFIGURATION'
        isOpen={showBlueprintInspector}
        activePipeline={
          !advancedMode
            ? {
              // ID: 0,
                name,
                // tasks: blueprintTasks,
                settings: blueprintSettings,
                cronConfig: isManualBlueprint ? '0 0 * * *' : (cronConfig === 'custom' ? customCronConfig : cronConfig),
                enable,
                mode,
                isManual: isManualBlueprint
              }
            : {
                name,
                plan: blueprintTasks,
                cronConfig: isManualBlueprint ? '0 0 * * *' : (cronConfig === 'custom' ? customCronConfig : cronConfig),
                enable,
                mode,
                isManual: isManualBlueprint
              }
        }
        onClose={setShowBlueprintInspector}
        hasBackdrop={false}
      />
    </>
  )
}

export default CreateBlueprint