import PropTypes from 'prop-types'
import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm'
import WizardView from '../../common/WizardView'

const NewOrderItem = ({ onOk, reset, defaultValues }) => {
  return (
    <NewObjectForm
      type={'orderItem'}
      reset={reset}
      defaultValues={{
        state: { type: 'draft' },
        syncAmount: null,
        quantity: 1,
        ...defaultValues
      }}
    >
      {({ handleSubmit, submitLoading, objectData, formValid }) => {
        const steps = [
          {
            title: 'Required',
            key: 'required',
            content: (
              <ObjectInfo
                type='orderItem'
                column={1}
                bordered={false}
                isEditing={true}
                required={true}
                objectData={objectData}
                visibleProperties={{
                  syncAmount: false,
                  itemAmount: false,
                  totalAmount: false,
                  totalAmountWithTax: false,
                  quantity: false,
                  invoicedAmount: false,
                  invoicedAmountWithTax: false,
                  invoicedQuantity: false,
                  invoicedAmountRemaining: false,
                  invoicedAmountWithTaxRemaining: false,
                  invoicedQuantityRemaining: false,
                  orderedAt: false,
                  receivedAt: false
                }}
              />
            )
          },

          {
            title: 'Optional',
            key: 'optional',
            content: (
              <ObjectInfo
                type='orderItem'
                column={1}
                bordered={false}
                isEditing={true}
                required={false}
                objectData={objectData}
                visibleProperties={{
                  sku: true,
                  shipment: true,
                  invoicedAmount: false,
                  invoicedAmountWithTax: false,
                  invoicedQuantity: false,
                  invoicedAmountRemaining: false,
                  invoicedAmountWithTaxRemaining: false,
                  invoicedQuantityRemaining: false,
                  orderedAt: false,
                  receivedAt: false,
                  syncAmount: false
                }}
              />
            )
          },
          {
            title: 'Pricing',
            key: 'pricing',
            content: (
              <ObjectInfo
                type='orderItem'
                column={1}
                bordered={false}
                isEditing={true}
                objectData={objectData}
                visibleProperties={{
                  syncAmount: true,
                  itemAmount: true,
                  quantity: true,
                  taxRate: true,
                  totalAmountWithTax: true,
                  totalAmount: true
                }}
              />
            )
          },
          {
            title: 'Summary',
            key: 'summary',
            content: (
              <ObjectInfo
                type='orderItem'
                column={1}
                bordered={false}
                visibleProperties={{
                  _id: false,
                  createdAt: false,
                  updatedAt: false,
                  _reference: false,
                  invoicedAmount: false,
                  invoicedAmountWithTax: false,
                  invoicedQuantity: false,
                  invoicedAmountRemaining: false,
                  invoicedAmountWithTaxRemaining: false,
                  invoicedQuantityRemaining: false,
                  orderedAt: false,
                  receivedAt: false
                }}
                isEditing={false}
                objectData={objectData}
              />
            )
          }
        ]
        return (
          <WizardView
            steps={steps}
            loading={submitLoading}
            formValid={formValid}
            title='New Order Item'
            onSubmit={async () => {
              const result = await handleSubmit()
              if (result) {
                onOk()
              }
            }}
          />
        )
      }}
    </NewObjectForm>
  )
}

NewOrderItem.propTypes = {
  onOk: PropTypes.func.isRequired,
  reset: PropTypes.bool,
  defaultValues: PropTypes.object
}

export default NewOrderItem
