import React from 'react'
import { CommonState } from '@skava/ui/dist/state'
import { PaymentWithBillingAddressProps } from './typings'
import {
  StyledLabel,
  StyledInput,
  Row,
  StyledAddSaveButton,
  StyledCancelButton,
  ButtonContainer,
  StyledTitle,
  StyledZipCode,
  StyledState,
  CheckboxLabel,
  Checkbox,
  StyledSecurity,
  StyledYear,
  StyledMonth,
  StyledCardNumber,
  StyledFields,
  PaymentMethodContainer,
  ToggleContainer,
  BillingFormContainer,
  StyledWrapper,
} from './styled'

function defaultRenderForm(
  props: PaymentWithBillingAddressProps,
  state: CommonState
) {
  const view = (
    <React.Fragment>
      <PaymentMethodContainer>
        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledCardNumber>
          <StyledLabel />
          <StyledInput />
        </StyledCardNumber>

        <StyledMonth>
          <StyledLabel />
          <StyledInput />
        </StyledMonth>

        <StyledYear>
          <StyledLabel />
          <StyledInput />
        </StyledYear>
      </PaymentMethodContainer>

      <ToggleContainer>
        <Row>
          <Checkbox />
          <CheckboxLabel />
        </Row>

        <Row>
          <Checkbox onClick={state.handleToggleVisibility} />
          <CheckboxLabel />
        </Row>
      </ToggleContainer>

      <BillingFormContainer isVisible={state.isVisible}>
        <Row>
          <StyledTitle />
        </Row>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledState>
          <StyledLabel />
          <StyledInput />
        </StyledState>

        <StyledZipCode>
          <StyledLabel />
          <StyledInput />
        </StyledZipCode>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>

        <StyledFields>
          <StyledLabel />
          <StyledInput />
        </StyledFields>
      </BillingFormContainer>

      <ButtonContainer>
        <StyledAddSaveButton />
        <StyledCancelButton />
      </ButtonContainer>
    </React.Fragment>
  )
  return view
}

function defaultRenderBox(
  props: PaymentWithBillingAddressProps,
  state: CommonState
) {
  const { renderForm, ...remainingProps } = props
  const formView = renderForm(remainingProps, state)
  return formView
}

function defaultRenderWrapper(props: PaymentWithBillingAddressProps) {
  const { className, children, dataQa } = props
  return (
    <StyledWrapper className={className} data-qa={dataQa}>
      {children}
    </StyledWrapper>
  )
}

export { defaultRenderForm, defaultRenderBox, defaultRenderWrapper }