Modal Balance Interval

'use client'
import React, { Fragment, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Button, Heading, Radio } from 'bianic-ui'
import { IconClose } from '../Icon'

const ModalBalanceInterval = ({
  isOpen,
  setIsOpen,
  submitHandler,
  interval,
  setInterval,
}) => {
  const [selectedData, setSelectedData] = useState(null)
  const [selectedDataChild, setSelectedDataChild] = useState(null)
  // console.log('interval MODAL BALANCE', interval)
  // console.log('selectedData MODAL BALANCE', selectedData)
  // console.log('selectedDataChild MODAL BALANCE', selectedDataChild)

  const checkboxData = [
    {
      name: 'Daily',
      key: 'Daily',
      value: '',
    },
    {
      name: 'Monthly',
      key: 'Monthly',
      value: '',
    },
    {
      name: 'Period',
      key: 'Period',
      value: [
        {
          name: 'Quarterly',
          key: 'Quarterly',
          value: 'quarterly',
        },
        {
          name: 'Semiannually',
          key: 'Semiannually',
          value: 'semiannually',
        },
        {
          name: 'Yearly',
          key: 'Yearly',
          value: 'yearly',
        },
      ],
    },
    {
      name: 'Custom Interval',
      key: 'Custom Interval',
      value: '',
    },
  ]

  const handleChangePeriod = (data) => {
    setSelectedData(data)
    setInterval({ name: data.key, value: data.value })
  }

  const handleChangePeriodChild = (data) => {
    const isString = typeof data.value === 'string'
    if (selectedData.name === 'Period' && isString) {
      if (data) {
        setSelectedDataChild(data)
        setInterval({ name: selectedData.key, value: data.key })
      }
    }
  }

  const [customInterval, setCustomInterval] = useState(interval.value || 1)
  const handleCustomInterval = (event) => {
    setCustomInterval(event.target.value)
    setInterval({
      name: selectedData.key,
      value: event.target.value,
    })
    setSelectedData({ ...selectedData, value: event.target.value })
  }

  const handleClose = () => setIsOpen(false)
  const disableButtonSet =
    interval?.name !== null && typeof interval?.value !== 'string'

  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative" onClose={() => handleClose()}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black bg-opacity-25" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center p-4 text-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="w-[330px] transform overflow-hidden rounded-md bg-white p-6 text-left align-middle text-[#2F2F2F] transition-all">
                <Dialog.Title className="mb-[20px] text-lg font-medium leading-6 text-[#2F2F2F]">
                  <div className="flex items-center justify-between">
                    <Heading variant="5">Balance Interval</Heading>
                    <Button
                      variant="subtle"
                      size="tiny"
                      radius="rounded"
                      left={<IconClose />}
                      onClick={() => handleClose()}
                    />
                  </div>
                </Dialog.Title>
                <div className="flex flex-col gap-5">
                  <p className="text-xs">
                    You have the capability to define specific interval dates
                    according to your needs.
                  </p>
                  <div className="flex flex-col gap-3">
                    {checkboxData.map((checkbox, checkboxIdx) => {
                      // console.log('checkbox map data', checkbox)
                      return (
                        <div key={checkboxIdx}>
                          <button
                            type="button"
                            className={`border-1 w-full ${checkbox.key === 'Period' ? 'rounded-t-md' : 'rounded-md'} border border-[#DADEEB] p-3`}
                            onClick={() => {
                              handleChangePeriod(checkbox)
                              setSelectedDataChild(null)
                            }}
                          >
                            <Radio
                              label={checkbox.name}
                              inputSize="small"
                              checked={checkbox.name === interval?.name}
                              readOnly
                            />
                          </button>
                          {checkbox.key === 'Period' &&
                            interval?.name === 'Period' && (
                              <div className="border-x-1 border-b-1 rounded-b-md border border-[#DADEEB]">
                                {checkbox.value.map(
                                  (checkboxChild, checkboxChildIdx) => {
                                    // console.log('checkboxChild ', checkboxChild)
                                    // console.log('interval ', interval)
                                    return (
                                      <button
                                        key={checkboxChildIdx}
                                        type="button"
                                        className="ml-8 w-full p-3"
                                        onClick={() =>
                                          handleChangePeriodChild(checkboxChild)
                                        }
                                      >
                                        <Radio
                                          label={checkboxChild.name}
                                          inputSize="small"
                                          checked={
                                            checkboxChild.name ===
                                            interval.value
                                            // selectedDataChild?.name
                                          }
                                          readOnly
                                        />
                                      </button>
                                    )
                                  }
                                )}
                              </div>
                            )}
                          {checkbox.name === 'Custom Interval' &&
                            interval?.name === 'Custom Interval' && (
                              <div className="border-x-1 border-b-1 flex flex-row items-center rounded-b-md border border-[#DADEEB] p-3">
                                <input
                                  type="number"
                                  className="input-form ml-8 w-[60px] p-1 text-xs"
                                  value={customInterval}
                                  onChange={(e) => handleCustomInterval(e)}
                                  min={1}
                                  max={365}
                                />
                                <p className="ml-3 text-xs">day</p>
                              </div>
                            )}
                        </div>
                      )
                    })}
                  </div>
                  <div className="right-button-group flex justify-end gap-[5px]">
                    <Button
                      label="Cancel"
                      variant="subtle"
                      size="small"
                      type="button"
                      onClick={() => handleClose()}
                    />
                    <Button
                      disabled={disableButtonSet}
                      label="Save"
                      variant="primary"
                      size="small"
                      type="submit"
                      onClick={() => {
                        submitHandler()
                        handleClose()
                      }}
                      shadow
                    />
                  </div>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  )
}

export default ModalBalanceInterval