import { Tooltip, Button, IconButton } from "@serendie/ui";
import { SerendieSymbol } from "@serendie/symbols";
import { HBox } from "src/components/LayoutUtils";
import { styled } from "styled-system/jsx";

const Span = styled("span", {
  base: {
    width: "fit-content",
  },
});

export function BasicSample() {
  return (
    <HBox alignItems="center">
      <Tooltip content="削除ボタンです。この操作は取り消せません。">
        <Span>
          <Button>削除</Button>
        </Span>
      </Tooltip>

      <Tooltip content="編集ボタンです">
        <Span>
          <Button styleType="outlined">編集</Button>
        </Span>
      </Tooltip>

      <Tooltip content="詳細情報を表示します">
        <Span>
          <IconButton
            icon={<SerendieSymbol name="information" />}
            styleType="ghost"
            size="small"
            shape="circle"
          />
        </Span>
      </Tooltip>
    </HBox>
  );
}

import { Tooltip, Button } from "@serendie/ui";
import { styled } from "../../../styled-system/jsx";

const Grid = styled("div", {
  base: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gridTemplateRows: "repeat(3, 1fr)",
    gap: "6",
    maxWidth: "400px",
    margin: "0 auto",
    padding: "8",
  },
});

const GridItem = styled("div", {
  base: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
});

const Span = styled("span", {
  base: {
    width: "fit-content",
  },
});

export function PlacementSample() {
  return (
    <Grid>
      <GridItem style={{ gridColumn: "2" }}>
        <Tooltip content="上" placement="top">
          <Span>
            <Button size="small" styleType="ghost">
              Top
            </Button>
          </Span>
        </Tooltip>
      </GridItem>

      <GridItem style={{ gridColumn: "1", gridRow: "2" }}>
        <Tooltip content="左" placement="left">
          <Span>
            <Button size="small" styleType="ghost">
              Left
            </Button>
          </Span>
        </Tooltip>
      </GridItem>

      <GridItem style={{ gridColumn: "2", gridRow: "2" }} />

      <GridItem style={{ gridColumn: "3", gridRow: "2" }}>
        <Tooltip content="右" placement="right">
          <Span>
            <Button size="small" styleType="ghost">
              Right
            </Button>
          </Span>
        </Tooltip>
      </GridItem>

      <GridItem style={{ gridColumn: "2", gridRow: "3" }}>
        <Tooltip content="下" placement="bottom">
          <Span>
            <Button size="small" styleType="ghost">
              Bottom
            </Button>
          </Span>
        </Tooltip>
      </GridItem>
    </Grid>
  );
}

import { Tooltip, Button } from "@serendie/ui";
import { styled } from "../../../styled-system/jsx";

const Span = styled("span", {
  base: {
    width: "fit-content",
  },
});

const Label = styled("span", {
  base: {
    fontSize: "sm",
    minWidth: "80px",
    textAlign: "right",
  },
});

const Grid = styled("div", {
  base: {
    display: "grid",
    gridTemplateColumns: "repeat(2, auto)",
    width: "fit-content",
    margin: "0 auto",
    rowGap: "sd.system.dimension.spacing.medium",
    columnGap: "sd.system.dimension.spacing.large",
    pr: "sd.system.dimension.spacing.medium",
  },
});

const GridItemContainer = styled("div", {
  base: {
    display: "grid",
    gridTemplateColumns: "subgrid",
    gridColumn: "span 2",
    alignItems: "center",
  },
});

export function StateSample() {
  return (
    <Grid>
      <GridItemContainer>
        <Label>プロパティなし:</Label>
        <Tooltip content="これは有効なツールチップです">
          <Span>
            <Button>enabledの場合</Button>
          </Span>
        </Tooltip>
      </GridItemContainer>

      <GridItemContainer>
        <Label>disabled:</Label>
        <Tooltip content="このツールチップは表示されません" disabled>
          <Span>
            <Button>disabledの場合</Button>
          </Span>
        </Tooltip>
      </GridItemContainer>
    </Grid>
  );
}