import * as Dialog from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

import type { Device } from '../../../DevicePage/types'
import { DeviceMapCard } from '../../../DevicePage/components/DeviceMapCard/DeviceMapCard'
import { MotionDialogContent } from '../../../../shared/ui/MotionDialog/MotionDialog'

import './DeviceMapModal.scss'

type DeviceMapModalProps = {
  open: boolean
  device: Device | null
  onOpenChange: (open: boolean) => void
}

export function DeviceMapModal({
  open,
  device,
  onOpenChange,
}: DeviceMapModalProps) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <MotionDialogContent
        open={open}
        overlayClassName="device-map-modal__overlay"
        contentClassName="device-map-modal"
        placement="inset"
      >
        <div className="device-map-modal__header">
          <div>
            <Dialog.Title className="device-map-modal__title">
              Устройство на карте
            </Dialog.Title>

            <Dialog.Description className="device-map-modal__description">
              {device?.factoryNumber || 'Выбранное устройство'}
            </Dialog.Description>
          </div>

          <Dialog.Close className="device-map-modal__close" type="button">
            <X size={22} />
          </Dialog.Close>
        </div>

        {device && (
          <div className="device-map-modal__body">
            <DeviceMapCard device={device} variant="modal" />
          </div>
        )}
      </MotionDialogContent>
    </Dialog.Root>
  )
}
