import React from 'react'
import { PaymentCardFormPlaceholderProps } from './typings'
import { omit } from 'uxui-modules/utils/omit'
import {
  Placeholder,
  TextPlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'
import {
  PaymentCardFormWrapper,
  PaymentCardFormContainer,
  Row,
  RowItems,
  CardNumberSection,
  MonthSection,
  YearSection,
  SecuritySection,
  PaymentCardFormNameSection,
  CardFormLabel,
  CardFormInput,
  PaymentCardDetailsSection,
  PaymentCardMethodCheckSection,
  CardFormCheckBox,
  CardFormCheckBoxLabel,
  PaymentCardButtonSection,
  ButtonLeftSection,
  ButtonRightSection,
} from './styled'

function renderPaymentCardFormButtonSection(
  props: PaymentCardFormPlaceholderProps
) {
  return (
    <PaymentCardButtonSection>
      <ButtonLeftSection>
        <RectanglePlaceholder height={44} />
      </ButtonLeftSection>
      <ButtonRightSection>
        <RectanglePlaceholder height={44} />
      </ButtonRightSection>
    </PaymentCardButtonSection>
  )
}

function renderPaymentCardMethodCheckSection(
  props: PaymentCardFormPlaceholderProps
) {
  return (
    <PaymentCardMethodCheckSection>
      <CardFormCheckBox>
        <RectanglePlaceholder height={25} />
      </CardFormCheckBox>
      <CardFormCheckBoxLabel>
        <RectanglePlaceholder height={20} />
      </CardFormCheckBoxLabel>
    </PaymentCardMethodCheckSection>
  )
}

function LabelInputItems(width: number) {
  return (
    <RowItems className="rowitems" role="rowitems">
      <CardFormLabel>
        <TextPlaceholder width={width} height={16} />
      </CardFormLabel>
      <CardFormInput>
        <RectanglePlaceholder height={44} />
      </CardFormInput>
    </RowItems>
  )
}

function renderPaymentCardDetailsSection(
  props: PaymentCardFormPlaceholderProps
) {
  return (
    <Row>
      <PaymentCardDetailsSection>
        <CardNumberSection>{LabelInputItems(70)}</CardNumberSection>
        <MonthSection>{LabelInputItems(30)}</MonthSection>
        <YearSection>{LabelInputItems(30)}</YearSection>
        <SecuritySection>{LabelInputItems(50)}</SecuritySection>
      </PaymentCardDetailsSection>
    </Row>
  )
}

function renderPaymentCardFormNameSection(
  props: PaymentCardFormPlaceholderProps
) {
  return (
    <Row>
      <PaymentCardFormNameSection>
        {LabelInputItems(120)}
        {LabelInputItems(120)}
      </PaymentCardFormNameSection>
    </Row>
  )
}

function renderPaymentCardFormContainer(
  props: PaymentCardFormPlaceholderProps
) {
  const passThroughProps = omit(props, [
    'renderPaymentCardFormNameSection',
    'renderPaymentCardDetailsSection',
    'renderPaymentCardMethodCheckSection',
    'renderPaymentCardFormButtonSection',
  ])

  const renderPaymentCardFormName = props.renderPaymentCardFormNameSection(
    passThroughProps
  )
  const renderPaymentCardDetails = props.renderPaymentCardDetailsSection(
    passThroughProps
  )
  const renderPaymentCardMethodCheck = props.renderPaymentCardMethodCheckSection(
    passThroughProps
  )
  const renderPaymentCardFormButton = props.renderPaymentCardFormButtonSection(
    passThroughProps
  )
  return (
    <PaymentCardFormContainer>
      {renderPaymentCardFormName}
      {renderPaymentCardDetails}
      {renderPaymentCardMethodCheck}
      {renderPaymentCardFormButton}
    </PaymentCardFormContainer>
  )
}

function renderPaymentCardFormWrapper(props: PaymentCardFormPlaceholderProps) {
  const { className, children } = props
  return (
    <PaymentCardFormWrapper className={className}>
      {children}
    </PaymentCardFormWrapper>
  )
}

export {
  LabelInputItems,
  renderPaymentCardFormWrapper,
  renderPaymentCardFormContainer,
  renderPaymentCardFormNameSection,
  renderPaymentCardDetailsSection,
  renderPaymentCardMethodCheckSection,
  renderPaymentCardFormButtonSection,
}