import { Button, Flex, Group, Modal, Select, Typography, Input, notifier } from '@tidbcloud/uikit'
import { TimePicker } from '@tidbcloud/uikit/biz'
import DOMPurify from 'dompurify'
import { observer } from 'mobx-react'
import { useCallback, useEffect, useState } from 'react'

import { utcOffsetToTz } from 'dbaas/screens/OrgSettings/features/General/helpers'
import { useMaintenanceServiceUpdateMaintenanceWindow } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

import { dayList, hourList } from './const'
import { useMaintenanceWindowContext } from './context'

export const EditModal = observer(({}) => {
  const {
    store: { tenantData, activeProject: project }
  } = useStores()

  const { maintenance, getMaintenance, getTaskList } = useMaintenanceWindowContext()

  const { editModalOpened, setEditModalOpened } = useMaintenanceWindowContext()
  const [loading, setLoading] = useState<boolean>(false)
  const [day, setDay] = useState<string>('0')
  const [hour, setHour] = useState<string>((maintenance?.dayHour || 0).toString())
  const [minute, setMinute] = useState<string>((maintenance?.hourMinute || 0).toString())

  const utcoffset = utcOffsetToTz(tenantData.timezone || 0)
  const userSetTimezone = `UTC${utcoffset === '+00:00' ? '±00:00' : utcoffset}`
  const windowUpdater = useMaintenanceServiceUpdateMaintenanceWindow()

  useEffect(() => {
    if (!editModalOpened) {
      return
    }

    if (maintenance?.weekDay) {
      setDay(maintenance.weekDay.toString())
    }
    if (maintenance?.dayHour) {
      setHour(maintenance.dayHour.toString())
    }

    if (maintenance?.hourMinute) {
      setMinute(maintenance.hourMinute.toString())
    }
  }, [maintenance, editModalOpened])

  const onSubmit = useCallback(async () => {
    setLoading(true)
    try {
      await windowUpdater.mutateAsync({
        maintenanceWindowId: maintenance?.maintenanceWindowId || '',
        data: {
          dayHour: +hour,
          hourMinute: +minute,
          weekDay: +day
        },
        params: {
          orgId: tenantData.id,
          projectId: project.id
        }
      })
      setEditModalOpened(false)
      getMaintenance()
      getTaskList()

      notifier.success('Maintenance window start time is changed succesfully')
    } catch (e) {
      notifier.error(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(getErrorMessage(e, true)) }} />)
    } finally {
      setLoading(false)
    }
  }, [tenantData.id, project.id, day, hour])

  return (
    <Modal
      centered
      title="Edit maintenance window start time"
      opened={editModalOpened}
      size={640}
      styles={{
        content: {
          transform: 'none !important',
          overflow: 'visible'
        }
      }}
      onClose={() => setEditModalOpened(false)}
    >
      <Typography fw={500} mb={8} fz={14} c="carbon.9">
        Current Start Time:
      </Typography>

      <Typography fz={14} c="carbon.8">
        {dayList[maintenance?.weekDay || 0]}, {hourList[maintenance?.dayHour || 0]}
      </Typography>
      <Typography fw={500} mt={30} fz={14} c="carbon.9">
        Change the maintenance window start time to
      </Typography>
      <Flex
        mt={8}
        mb={24}
        gap={24}
        styles={{
          root: {
            '.mantine-Popover-dropdown': {
              '.mantine-ScrollArea-root': {
                '&:last-child': {
                  display: 'none'
                }
              }
            }
          }
        }}
      >
        <Select
          value={day}
          placeholder="Select day"
          data={dayList.map((v, i) => ({ label: `Every ${v}`, value: i.toString() }))}
          onChange={(v) => v && setDay(v)}
        />

        <TimePicker
          sx={{ flex: 1 }}
          withinPortal={false}
          withArrow={false}
          value={`${hour}:${minute}:00`}
          onChange={(v) => {
            const time = v.split(':')
            if (time.length === 3) {
              setHour(time[0])
              setMinute(time[1])
            }
          }}
          minTime="00:00:00"
          maxTime="23:59:59"
        />

        <Input value={userSetTimezone} disabled />
      </Flex>
      <Group justify="flex-end" mt={16}>
        <Button variant="default" onClick={() => setEditModalOpened(false)} data-mp-event="mp-cancel-1691461014301">
          Cancel
        </Button>
        <Button loading={loading} onClick={onSubmit} data-mp-event="mp-submit-1691461014303">
          Submit
        </Button>
      </Group>
    </Modal>
  )
})