import { createSelector } from '@reduxjs/toolkit'
import type { RootState } from 'domains/store'

const getState = ({ forms }: RootState) => forms

export const getFormById = createSelector(
  [getState, (_, { formId }): string => formId],
  (forms, formId) => forms[formId],
)

const getFormControlsByFormId = createSelector(
  getFormById,
  (form) => form?.controls || {},
)

export const getFormValuesByFormId = createSelector(
  getFormControlsByFormId,
  (controls: { [key: string]: { value: string } }) => {
    const valuesObj = {}
    Object.entries(controls).forEach(([key, { value }]) => {
      valuesObj[key] = value
    })

    return valuesObj
  },
)

export const getControlValueByName = createSelector(
  [getFormControlsByFormId, (_, { name }): string => name],
  (controls, name) => controls[name]?.value,
)

export const getControlTouchedByName = createSelector(
  [getFormControlsByFormId, (_, { name }): string => name],
  (controls, name) => controls[name]?.touched,
)