import { JamKerjaCreate } from '@/services/manajemen/jam-kerja-service'
import { Formik } from 'formik'
import moment from 'moment'
import { Button } from 'primereact/button'
import { Calendar } from 'primereact/calendar'
import { Dialog } from 'primereact/dialog'
import { MultiSelect } from 'primereact/multiselect'

const dbHari = [
	{ name: 'Senin', code: 'senin' },
	{ name: 'Selasa', code: 'selasa' },
	{ name: 'Rabu', code: 'rabu' },
	{ name: 'Kamis', code: 'kamis' },
	{ name: 'Jumat', code: 'jumat' },
	{ name: 'Sabtu', code: 'sabtu' },
	{ name: 'Minggu', code: 'minggu' },
]

export default function FormJamKerja({ dialogForm, setDialogForm, dataEdit, toast, refresh }) {
	return (
		<>
			<Formik
				initialValues={{
					user_id: dataEdit.user_id || '',
					hari: dataEdit.hari || null,
					jam_masuk: dataEdit.jam_masuk || null,
					jam_keluar: dataEdit.jam_keluar || null,
				}}
				onSubmit={(data, { setSubmitting }) => {
					Object.assign(data, {
						jam_masuk: moment(data.jam_masuk).format('HH:mm'),
						jam_keluar: moment(data.jam_keluar).format('HH:mm'),
					})
					let time = data.jam_masuk + '-' + data.jam_keluar
					let days = ''
					let panjang_array = data.hari.length
					data.hari.map((values, i) => {
						let plus1 = i + 1
						let koma = plus1 < panjang_array ? ',' : ''
						days += values.code + koma
					})

					let dataKirim = { days, time }
					JamKerjaCreate(dataKirim).then((res) => {
						if (res.status === 'success') {
							setDialogForm(false)
							refresh(Math.random)
							toast.current.show({
								severity: 'success',
								detail: res.message,
								closable: false,
							})
						} else {
							setDialogForm(false)
							refresh(Math.random)
							toast.current.show({
								severity: 'error',
								detail: res.message,
								closable: false,
							})
						}
					})
					setSubmitting(false)
				}}
				validateOnChange={false}
			>
				{({ values, handleChange, handleSubmit, isSubmitting, resetForm }) => {
					const dialogFooter = (
						<div className='flex justify-end'>
							<Button
								type='submit'
								label='Cancel'
								className='p-button-sm p-button-secondary'
								onClick={() => {
									resetForm()
									setDialogForm(false)
								}}
							/>
							<Button
								type='submit'
								label='Save'
								className='p-button-sm p-button-primary'
								onClick={handleSubmit}
								loading={isSubmitting}
							/>
						</div>
					)
					return (
						<Dialog
							header={values.user_id ? 'Update Jam Kerja' : 'Add Jam Kerja'}
							className='p-dialog-form'
							visible={dialogForm}
							draggable={false}
							resizable={false}
							position={'center'}
							closable={false}
							style={{ width: '30vw' }}
							footer={dialogFooter}
						>
							<form onSubmit={handleSubmit}>
								<div className='p-fluid grid'>
									<div className='field col-12 md:col-12 mb-2'>
										<label className='block'>Pilih Hari</label>
										<MultiSelect
											id='hari'
											value={values.hari}
											onChange={handleChange}
											options={dbHari}
											optionLabel='name'
											placeholder='Select Hari'
											maxSelectedLabels={3}
											className='w-full md:w-20rem'
										/>
									</div>
									<div className='grid grid-cols-2 gap-3'>
										<div className='mb-2'>
											<label className='block'>Jam Masuk</label>
											<Calendar
												id='jam_masuk'
												value={values.jam_masuk}
												onChange={handleChange}
												placeholder='Masukkan Jam Masuk'
												timeOnly
												hourFormat='24'
											/>
										</div>
										<div className='mb-2'>
											<label className='block'>Jam Keluar</label>
											<Calendar
												id='jam_keluar'
												value={values.jam_keluar}
												onChange={handleChange}
												placeholder='Masukkan Jam Keluar'
												timeOnly
												hourFormat='24'
												minDate={values.jam_masuk}
												disabled={values.jam_masuk ? false : true}
											/>
										</div>
									</div>
								</div>
							</form>
						</Dialog>
					)
				}}
			</Formik>
		</>
	)
}