import { Box, Card, Flex, Grid, Text, Theme } from "@radix-ui/themes"
import type { Meta, StoryObj } from "@storybook/react"
import { Inset } from "./Inset"

const meta: Meta<typeof Inset> = {
  title: "base/containment/Inset",
  component: Inset,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "The Inset component creates an inset area for content, useful for creating visual depth and padding in cards or panels.",
      },
    },
  },
  argTypes: {
    side: {
      control: "select",
      options: ["all", "x", "y", "top", "right", "bottom", "left"],
      description: "Which sides to apply the inset to.",
    },
    p: {
      control: "text",
      description: 'Padding value (e.g., "current", "0", "1", "2", etc.)',
    },
    asChild: {
      control: "boolean",
      description: "Render as a child element.",
    },
  },
} as Meta<typeof Inset>

export default meta

type Story = StoryObj<typeof Inset>

const TypographyImage = ({ width = "100%", height = 140 }) => (
  <img
    src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
    alt="Bold typography"
    style={{
      display: "block",
      objectFit: "cover",
      width: width,
      height: height,
      backgroundColor: "var(--gray-5)",
    }}
  />
)

const TypographyText = () => (
  <>
    <Text as="div" size="3" weight="bold" mb="2" color="lime">
      Typography
    </Text>
    <Text as="p" size="2" color="plum">
      is the art and technique of arranging type to make written language legible, readable and
      appealing when displayed.
    </Text>
  </>
)

// Default story showing the Inset showcase
export const Default: Story = {
  render: () => (
    <Theme>
      <Box style={{ width: "900px" }}>
        <Text as="span" size="8" weight="bold" mb="5" style={{ color: "var(--orange-9)" }}>
          Inset
        </Text>

        <Grid columns="2" gap="4" width="auto">
          <Card size="2">
            <Flex gap="0" align="stretch">
              <Inset side="left" p="0" style={{ flex: "0 0 150px" }}>
                <TypographyImage width="150px" />
              </Inset>
              <Box p="3" style={{ flex: 1 }}>
                <TypographyText />
              </Box>
            </Flex>
          </Card>

          <Card size="2" style={{ backgroundColor: "var(--gray-12)" }}>
            <Flex gap="0" align="stretch">
              <Box p="3" style={{ flex: 1 }}>
                <TypographyText />
              </Box>
              <Inset side="right" p="0" style={{ flex: "0 0 150px" }}>
                <TypographyImage width="150px" />
              </Inset>
            </Flex>
          </Card>

          <Card size="2" style={{ backgroundColor: "var(--gray-2)" }}>
            <Inset side="all" p="0">
              <Flex
                gap="3"
                align="stretch"
                style={{ backgroundColor: "white", borderRadius: "4px", overflow: "hidden" }}
              >
                <Box style={{ flex: "0 0 140px" }}>
                  <TypographyImage width="140px" />
                </Box>
                <Box p="3" style={{ flex: 1 }}>
                  <TypographyText />
                </Box>
              </Flex>
            </Inset>
          </Card>

          <Card size="2">
            <Flex gap="0" align="stretch">
              <Box p="3" style={{ flex: 1 }}>
                <TypographyText />
              </Box>
              <Box style={{ flex: "0 0 150px" }}>
                <TypographyImage width="150px" />
              </Box>
            </Flex>
          </Card>

          <Card size="2" style={{ gridColumn: "span 2" }}>
            <Flex gap="0" align="stretch">
              <Inset side="left" p="0" style={{ flex: "0 0 300px" }}>
                <TypographyImage width="300px" height={200} />
              </Inset>
              <Flex direction="column" justify="center" p="5" style={{ flex: 1 }}>
                <Text as="div" size="4" weight="bold" mb="3">
                  Typography
                </Text>
                <Text as="p" size="3" color="gray">
                  is the art and technique of arranging type to make written language legible,
                  readable and appealing when displayed. The arrangement of type involves selecting
                  typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
                </Text>
              </Flex>
            </Flex>
          </Card>

          <Card size="2" style={{ backgroundColor: "var(--gray-12)", gridColumn: "span 2" }}>
            <Flex gap="0" align="stretch">
              <Box p="4" style={{ flex: 1 }}>
                <TypographyText />
              </Box>
              <Inset side="y" p="0" style={{ flex: "0 0 250px" }}>
                <Box style={{ position: "relative", height: "100%" }}>
                  <TypographyImage width="250px" />
                  <Box
                    style={{
                      position: "absolute",
                      bottom: 0,
                      left: 0,
                      right: 0,
                      background: "linear-gradient(to top, rgba(0,0,0,0.8), transparent)",
                      padding: "20px",
                    }}
                  >
                    <Text size="1" weight="bold" style={{ color: "white" }}>
                      INSET DEMO
                    </Text>
                  </Box>
                </Box>
              </Inset>
            </Flex>
          </Card>
        </Grid>
      </Box>
    </Theme>
  ),
}

// Side-by-side comparison
export const LeftRightComparison: Story = {
  render: () => (
    <Theme>
      <Box style={{ width: "800px" }}>
        <Text as="span" size="6" weight="bold" mb="4">
          Left vs Right Image Placement
        </Text>

        <Flex direction="column" gap="4">
          <Card size="2">
            <Text size="1" color="gray" mb="2" style={{ padding: "8px 8px 0" }}>
              Image Left - side="left" p="0"
            </Text>
            <Flex gap="0" align="stretch">
              <Inset side="left" p="0" style={{ flex: "0 0 180px" }}>
                <TypographyImage width="180px" />
              </Inset>
              <Box p="3" style={{ flex: 1 }}>
                <TypographyText />
              </Box>
            </Flex>
          </Card>

          <Card size="2">
            <Text size="1" color="gray" mb="2" style={{ padding: "8px 8px 0" }}>
              Image Right - side="right" p="0"
            </Text>
            <Flex gap="0" align="stretch">
              <Box p="3" style={{ flex: 1 }}>
                <TypographyText />
              </Box>
              <Inset side="right" p="0" style={{ flex: "0 0 180px" }}>
                <TypographyImage width="180px" />
              </Inset>
            </Flex>
          </Card>

          <Card size="2">
            <Text size="1" color="gray" mb="2" style={{ padding: "8px 8px 0" }}>
              With Inset - side="all" p="3"
            </Text>
            <Inset side="all" p="current">
              <Flex
                gap="3"
                align="stretch"
                style={{
                  backgroundColor: "var(--gray-3)",
                  borderRadius: "4px",
                  overflow: "hidden",
                }}
              >
                <Box style={{ flex: "0 0 160px" }}>
                  <TypographyImage width="160px" />
                </Box>
                <Box p="2" style={{ flex: 1 }}>
                  <TypographyText />
                </Box>
              </Flex>
            </Inset>
          </Card>
        </Flex>
      </Box>
    </Theme>
  ),
}

// Interactive playground with side images
export const Playground: Story = {
  args: {
    side: "left",
    p: "0",
  },
  render: args => (
    <Theme>
      <Card style={{ width: "500px" }}>
        <Flex gap="0" align="stretch">
          {args.side === "left" || args.side === "all" || args.side === "x" ? (
            <>
              <Inset {...args} style={{ flex: "0 0 200px" }}>
                <TypographyImage width="200px" />
              </Inset>
              <Box p="4" style={{ flex: 1 }}>
                <Text as="div" size="3" weight="bold" mb="2">
                  Interactive Inset
                </Text>
                <Text as="p" size="2" color="gray">
                  Adjust the controls to see how the inset affects image positioning. Try different
                  side values!
                </Text>
              </Box>
            </>
          ) : (
            <>
              <Box p="4" style={{ flex: 1 }}>
                <Text as="div" size="3" weight="bold" mb="2">
                  Interactive Inset
                </Text>
                <Text as="p" size="2" color="gray">
                  Adjust the controls to see how the inset affects image positioning. Try different
                  side values!
                </Text>
              </Box>
              <Inset {...args} style={{ flex: "0 0 200px" }}>
                <TypographyImage width="200px" />
              </Inset>
            </>
          )}
        </Flex>
      </Card>
    </Theme>
  ),
}