import { FC } from "react"
import { Box, Flex, Paper } from "@mantine/core"
import { EventLog, PreviewFrame } from "@/features/landings"
import MainLayout from "@/ensembles/MainLayout"
import { useGetLandingDetailQuery } from "@/models/landings"
import FileList from "./ui/FileList"
import MegafonControls from "./ui/MegafonControls"

interface LandingViewProps {
  serviceKey: string
  landingKey: string
}

const LandingView: FC<LandingViewProps> = ({ serviceKey, landingKey }) => {
  const { data: landing } = useGetLandingDetailQuery({
    serviceKey,
    landingKey,
  })

  return (
    <MainLayout>
      <Flex
        direction={{ base: "column", md: "row" }}
        flex={1}
        miw={0}
        mih={0}
        style={{ overflow: "hidden" }}
      >
        <FileList files={landing?.files || []} />
        <Box
          flex={1}
          miw={0}
          mih={0}
          bg="dark.9"
          style={{ display: "flex", flexDirection: "column", minHeight: 0 }}
        >
          {landing && <PreviewFrame src={landing.indexUrl} />}
        </Box>
        <Paper
          withBorder
          p={0}
          radius={0}
          w={{ base: "100%", md: 320 }}
          mih={{ base: 200, md: 0 }}
          style={{
            flexShrink: 0,
            display: "flex",
            flexDirection: "column",
            minHeight: 0,
          }}
        >
          <MegafonControls serviceKey={serviceKey} landingKey={landingKey} />
          <Box flex={1} style={{ minHeight: 0 }}>
            <EventLog />
          </Box>
        </Paper>
      </Flex>
    </MainLayout>
  )
}

export default LandingView