import React from 'react'
import { isFunction, isString, isSafe, isUndefined } from 'exotic'
import { application } from '@skava/state'
import { ValidationStrategyContext } from '@skava/forms/build/dist/src/new-forms/strategies'
import { PluginsContext } from '@skava/forms/build/dist/src/new-forms/plugins/PluginsContext'
import { OneFormState } from '@skava/forms/build/dist/src/new-forms/OneForm/OneForm'
import { OneObserverForm } from '@skava/forms/build/dist/src/new-forms/OneForm/OneForm'
import { InputState } from '@skava/forms/build/dist/src/new-forms/inputs/InputState'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
import { StyledButtonWrapper } from 'abstractions/ShoppingList/Item'
import { ToggleRemainingProps } from 'molecules/Toggle'
import { ShareList } from '../ShareList'
import { ItemProps, ItemStateProps } from './typings'
import {
  StyledListDetails,
  StyledListName,
  StyledListCount,
  ListNameWrapper,
  StyledRemoveIcon,
  StyledToggleSwitch,
  StyledConfirmationCard,
  StyledProductListWrapper,
  StyledTextBoxPlugin,
  StyledProductList,
} from './styled'

function defaultRenderButtonGroup() {
  return <Empty />
}

const inputsList = [
  {
    type: 'text',
    name: 'listName',
    value: '',
    autoFocus: true,
  },
]

const formState = new OneFormState().setInputsList(inputsList)

function defaultRenderListDetails(props: ItemProps, state: ItemStateProps) {
  const { itemCount, strategy } = props
  const { isConfirming, isActive, listName, setIsVisible } = state

  const count =
    isSafe(itemCount) && isString(itemCount) ? parseInt(itemCount) : itemCount

  const handleFocus = () => {
    setIsVisible(true)
  }

  const onPreFill = (inputState: InputState) => {
    inputState.setValue(listName)
  }

  return (
    <ListNameWrapper
      isConfirming={isConfirming}
      isActive={isActive}
      onClick={handleFocus}
    >
      {isActive === true ? (
        <ValidationStrategyContext.Provider value={strategy}>
          <PluginsContext.Provider value={[StyledTextBoxPlugin]}>
            <OneObserverForm
              state={formState}
              renderButtonGroup={defaultRenderButtonGroup}
              onPreFill={onPreFill}
            />
          </PluginsContext.Provider>
        </ValidationStrategyContext.Provider>
      ) : (
        <React.Fragment>
          <StyledListName>{listName}</StyledListName>
          {isSafe(count) && <StyledListCount>{`(${count})`}</StyledListCount>}
        </React.Fragment>
      )}
    </ListNameWrapper>
  )
}

function defaultRenderShareList(props: ItemProps) {
  const { listName, iconsList, onShare } = props
  const attributes = {
    listName,
    iconsList,
    onShare,
  }
  return <ShareList {...attributes} />
}

function defaultRenderRemoveList(props: ItemProps, state: ItemStateProps) {
  const { shoppingListCollapseState } = props

  const handleRemoveClick = () => {
    state.handleConfirm()
    if (isUndefined(shoppingListCollapseState.removeConfirmationState)) {
      shoppingListCollapseState.removeConfirmationState = state
    } else if (state.isConfirming === true) {
      shoppingListCollapseState.removeConfirmationState.handleConfirmCancel()
      shoppingListCollapseState.removeConfirmationState = state
    }
  }

  return <StyledRemoveIcon type="delete" onClick={handleRemoveClick} />
}

function defaultRenderRemoveConfirmation(
  props: ItemProps,
  state: ItemStateProps
) {
  const {
    onRemoveList,
    listName,
    identifier,
    shoppingListCollapseState,
  } = props
  const handleRemoveClosed = () => {
    state.handleConfirmCancel()
    shoppingListCollapseState.removeConfirmationState = undefined
  }

  const handleRemoveConfirm = () => {
    handleRemoveClosed()
    if (isFunction(onRemoveList)) {
      onRemoveList({ listName, identifier })
    }
  }

  const attributes = {
    confirmationText: wording.deleteList,
    confirmButtonLabel: wording.yes,
    cancelButtonLabel: wording.cancel,
    onConfirmation: handleRemoveConfirm,
    onCancel: handleRemoveClosed,
  }
  return <StyledConfirmationCard {...attributes} />
}

function defaultRenderToggleSwitch(props: ItemProps, state: ItemStateProps) {
  const { onToggleStatus, listName, identifier, accessType } = props
  const { isPrivate, setIsPrivate } = state
  const handleToggle = (args: Partial<ToggleRemainingProps>) => {
    setIsPrivate(args.isSelected)
    if (isFunction(onToggleStatus)) {
      onToggleStatus({ ...args, listName, identifier })
    }
  }
  // const isPrivate = accessType.toLowerCase() === wording.private ? true : false
  const attributes = {
    iconType: 'switch',
    isAnimated: true,
    defaultLabel: wording.private,
    toggleLabel: wording.private,
    defaultLabelDataQa: 'qa-list-status',
    toggleLabelDataQa: 'qa-list-status',
    onToggle: handleToggle,
    isSelected: isPrivate,
  }
  return <StyledToggleSwitch {...attributes} />
}

function defaultRenderActionBar(props: ItemProps, state: ItemStateProps) {
  const { isConfirming } = state
  return (
    <React.Fragment>
      {defaultRenderListDetails(props, state)}
      {isConfirming === false && (
        <StyledButtonWrapper>
          {defaultRenderRemoveList(props, state)}
          {defaultRenderShareList(props)}
          {defaultRenderToggleSwitch(props, state)}
        </StyledButtonWrapper>
      )}
    </React.Fragment>
  )
}

function defaultRenderButton(props: ItemProps, state: ItemStateProps) {
  const {
    listName,
    identifier,
    onShowDetails,
    shoppingListCollapseState,
  } = props
  const { isConfirming, isExpanded } = state
  const iconType = isExpanded ? 'expand_less' : 'expand_more'

  const handleListToggle = () => {
    state.handleToggle()
    if (isUndefined(shoppingListCollapseState.collapseState)) {
      shoppingListCollapseState.collapseState = state
    } else if (state.isExpanded === true) {
      shoppingListCollapseState.collapseState.handleToggle()
      shoppingListCollapseState.collapseState = state
    } else {
      shoppingListCollapseState.collapseState = undefined
    }

    if (isFunction(onShowDetails)) {
      const eventProps = {
        ...state,
        listName,
        identifier,
      }
      onShowDetails(eventProps)
    }
  }

  return (
    (application.isDesktop === false || isConfirming === false) && (
      <StyledListDetails
        text={wording.listDetails}
        breedType="icon-with-text"
        iconAlignType={'suffix'}
        iconType={iconType}
        onClick={handleListToggle}
        isConfirming={isConfirming}
      />
    )
  )
}

function defaultRenderExpandableView(props: ItemProps, state: ItemStateProps) {
  const { isConfirming } = state
  const {
    productList,
    shoppingListDropDownList,
    onAddToCart,
    onRemoveItem,
    onFormSubmit,
  } = props

  const attributes = {
    productList,
    shoppingListDropDownList,
    onAddToCart,
    onRemoveItem,
    onFormSubmit,
  }

  return (
    <StyledProductListWrapper isConfirming={isConfirming}>
      <StyledProductList {...attributes} />
    </StyledProductListWrapper>
  )
}

export {
  defaultRenderActionBar,
  defaultRenderButton,
  defaultRenderExpandableView,
  defaultRenderRemoveConfirmation,
}