import React from 'react'
import { CommonState } from 'src/state'
import { ActionButtonGroupProps } from './typings'
import {
  SectionWrapper,
  BaseWrapper,
  PrintButton,
  OrderAgainButton,
  ReturnButton,
  CancelButton,
} from './styled'
import CancelReturnForm from 'presets/Order/CancelReturnForm'

/**
 * click function
 */
function handleClick(state: CommonState) {
  state.toggleActive()
}

/**
 * render actions button
 */
function defaultRenderDefaultView(props: ActionButtonGroupProps, state: CommonState) {
  const onClick = event => handleClick(state)
  const view = (
    <React.Fragment>
      <PrintButton text={'primary'} onClick={onClick} />
      <OrderAgainButton text={'secondary'} />
      <ReturnButton text={'teritary'} />
    </React.Fragment>
  )
  return view
}

function defaultRenderActiveView(props: ActionButtonGroupProps, state: CommonState) {
  return (
    <React.Fragment>
      <CancelReturnForm state={state} />
    </React.Fragment>
  )
}

/**
 * render Wrapper
 */
function defaultRenderWrapper(props: ActionButtonGroupProps, state?: CommonState) {
  const { className, children } = props
  return <SectionWrapper className={className} {...state} >{children}</SectionWrapper>
}

export {
  defaultRenderActiveView,
  defaultRenderDefaultView,
  defaultRenderWrapper,
}