import React from 'react'
import { CommonState } from '@skava/ui/dist/state'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { Modal, ModalContext } from '@skava/ui/dist/components/organisms/Modal'
import { Form } from './Form'
import { ShareListProps } from './typings'
import {
  StyledModalBox,
  StyledModalTitle,
  StyledListName,
  FlexCenter,
  StyledSocialIconList,
  Wrapper,
  StyledShareIcon,
} from './styled'

function defaultRenderTitle(props: ShareListProps) {
  const { title } = props
  return <StyledModalTitle>{title}</StyledModalTitle>
}

function defaultRenderListName(props: ShareListProps) {
  const { listName } = props
  return (
    <FlexCenter>
      <MaterialIcon type="list" {...props} />
      <StyledListName>{listName}</StyledListName>
    </FlexCenter>
  )
}

function defaultRenderSocialIconList(props: ShareListProps) {
  const { iconsList } = props
  return <StyledSocialIconList iconsList={iconsList} />
}

function defaultRenderForm(props: ShareListProps, state: CommonState) {
  return <Form onCancel={state.handleHide} {...props} />
}

function defaultRenderModal(props: ShareListProps, state: CommonState) {
  const {
    renderTitle,
    renderListName,
    renderForm,
    renderSocialIconList,
    ...remainingProps
  } = props

  return (
    <ModalContext>
      <Modal isVisible={state.isVisible}>
        <StyledModalBox>
          {renderTitle(remainingProps)}
          {renderListName(remainingProps)}
          {renderForm(remainingProps, state)}
          {renderSocialIconList(remainingProps)}
        </StyledModalBox>
      </Modal>
    </ModalContext>
  )
}

function defaultRenderShareIcon(props: ShareListProps, state: CommonState) {
  const qa = {
    'data-qa': 'qa-share',
  }
  return <StyledShareIcon type="share" onClick={state.handleShow} {...qa} />
}

function defaultRenderBox(props: ShareListProps, state: CommonState) {
  const { renderModal, renderShareIcon, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderShareIcon(remainingProps, state)}
      {state.isVisible && renderModal(remainingProps, state)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ShareListProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderSocialIconList,
  defaultRenderForm,
  defaultRenderListName,
  defaultRenderTitle,
  defaultRenderModal,
  defaultRenderShareIcon,
  defaultRenderBox,
  defaultRenderWrapper,
}