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

const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
  return (
    <NewObjectForm
      type={'documentJob'}
      defaultValues={{ objectType: 'documentJob', ...defaultValues }}
    >
      {({ handleSubmit, submitLoading, objectData, formValid }) => {
        const steps = [
          {
            title: 'Required',
            key: 'required',
            content: (
              <ObjectInfo
                type='documentJob'
                column={1}
                visibleProperties={{ name: false }}
                bordered={false}
                isEditing={true}
                required={true}
                objectData={objectData}
              />
            )
          }
        ]
        return (
          <WizardView
            steps={steps}
            submitText='Print'
            title={'Print Document'}
            formValid={formValid}
            loading={submitLoading}
            sideBar={
              <div style={{ minWidth: '400px', minHeight: '500px' }}>
                <TemplatePreview
                  objectData={objectData?.object}
                  documentTemplate={objectData?.documentTemplate}
                  onPreviewMessage={(message) => {
                    console.log(message)
                  }}
                />
              </div>
            }
            onSubmit={() => {
              handleSubmit()
              onOk()
            }}
          />
        )
      }}
    </NewObjectForm>
  )
}

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

export default NewDocumentJob
