import React from 'react'
import { storiesOf } from '@storybook/react'
import { observer } from 'xmobx/mobx-react'
import { words } from 'src/bootstrapper/words'
import { CommonState } from 'src/state'
import { AnimatedCardState } from 'src/components/presets/AnimatedExpandableCard'
import CancelReturnForm from 'presets/Order/CancelReturnForm'
import {
  defaultRenderStatus,
  defaultRenderPaymentSummary,
  defaultRenderProductItemList,
} from 'presets/Order/renderProps'
import {
  Order,
  OrderPresetProps,
} from 'presets/Order'
import {
  PrintButton,
  OrderAgainButton,
  ReturnButton,
  StyledPrintButton,
  StyledOrderAgainButton,
  StyledReturnButton,
  ActionButtonGroupProps,
} from 'presets/Order/ActionButtonGroup'
import { defaultRenderProductItem, ProductItemListDataType, ProductItemListProps } from 'presets/Order/ProductItemList'
import { DetailedListDataType } from 'molecules/DetailedList/typings'
import { PaymentInfoType } from 'presets/Order/PaymentSummary'
import { SelectionListProps } from 'presets/SectionList/typings'
import { StyledPhysicalAddress } from 'abstractions/Order/ProductItemList'

interface OrderThemedProps {
  list: ProductItemListDataType
  /**
   * @todo - probably generic or something for how it's used in integration, will need to check
   *
   * like handling cancel vs write review vs return
   * like handling hover
   * like styling responsively with state/application if needed
   * like
   */
  // state: any
  orderStatusData: DetailedListDataType
  shippingAddressInfo: PaymentInfoType
  shippingMethodInfo: PaymentInfoType
  paymentMethodInfo: PaymentInfoType
  orderSummaryInfo: SelectionListProps
}

const renderProductItemButtons = (props: ActionButtonGroupProps, state: CommonState) => {
  const view = (
    <React.Fragment>
      <StyledPrintButton
        text={words.itemButtonPrimary}
        onClick={state.toggleActive}
      />
      <StyledOrderAgainButton text={words.itemButtonSecondary} />
      <StyledReturnButton text={words.itemButtonTertiary} />
    </React.Fragment>
  )
  return view
}

const renderProductItemAddress = (item: ProductItemListProps) {
  return <StyledPhysicalAddress address={item.shippingAddress} />
}

const renderProductItemForm = (props: ActionButtonGroupProps, state: CommonState) => {
  return <CancelReturnForm state={state} />
}

const renderProductItem = (item: ProductItemListProps) => {
  const attributes = {
    ...item,
    renderProductItemAddress,
    renderProductItemButtons,
    renderProductItemForm,
  }
  return defaultRenderProductItem(attributes)
}

const renderOrderButtons = (props: ActionButtonGroupProps, state: CommonState) => {
  const view = (
    <React.Fragment>
      <PrintButton text={words.orderButtonPrimary} onClick={state.toggleActive} />
      <OrderAgainButton text={words.orderButtonSecondary} />
      <ReturnButton text={words.orderButtonTertiary} />
    </React.Fragment>
  )
  return view
}

const renderOrderForm = (props: ActionButtonGroupProps, state: CommonState) => {
  return <CancelReturnForm state={state} />
}

const createRenderProps = (data: OrderThemedProps) => {
  const renderStatus = (props: OrderPresetProps, state: AnimatedCardState) =>
    defaultRenderStatus({ ...props, orderStatusData: data.orderStatusData }, state)

  const renderPaymentSummary = (props: OrderPresetProps, state: AnimatedCardState) => {
    const hasSingleItem = data.list.length === 1 ? true : false
    const attributes = {
      ...props,
      //
      shippingAddressInfo: data.shippingAddressInfo,
      shippingMethodInfo: data.shippingMethodInfo,
      paymentMethodInfo: data.paymentMethodInfo,
      orderSummaryInfo: data.orderSummaryInfo,
      singleProduct: hasSingleItem,
      //
      renderButtons: renderOrderButtons,
      renderForm: renderOrderForm,
    }
    return defaultRenderPaymentSummary(attributes)
  }

  const renderProductItemList = (props: OrderPresetProps, state: AnimatedCardState) => {
    const attributes = {
      ...props,
      list: data.list,
      //
      renderProductItem,
    }
    return defaultRenderProductItemList(attributes, state)
  }

  return {
    renderStatus,
    renderPaymentSummary,
    renderProductItemList,
  }
}

@observer
class OrderThemed extends React.Component<OrderThemedProps> {
  render() {
    const {
      list,
      orderStatusData,
      shippingAddressInfo,
      shippingMethodInfo,
      paymentMethodInfo,
      orderSummaryInfo,
      ...remainingProps
    } = this.props

    const { renderStatus, renderPaymentSummary, renderProductItemList } = createRenderProps(this.props)
    const attributes = {
      renderProductItemList,
      renderStatus,
      renderPaymentSummary,
      renderOrderButtons,
      renderOrderForm,
      ...remainingProps
    }
    return <Order {...attributes} />
  }
}
export { OrderThemed }
export default OrderThemed