import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { RtButton } from '@dpa/react-buttons';
import { RtTooltip } from '@dpa/react-tooltip';

export function TooltipPage() {
  return (
    <RtFrame
      as="div"
      surface="foundation-low-tint"
      modifier="base"
      style={{
        minHeight: '100vh',
        padding: '40px',
      }}
    >
      <RtFrame
        as="div"
        surface="foundation-pure"
        use="achromatic-cloudy"
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          borderRadius: '10px',
          padding: '24px',
        }}
      >
        <RtText typography="body-lg-medium">RtTooltip</RtText>

        <RtText typography="body-sm-medium">Size</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip
            alignment="end"
            use="achromatic-ashy"
            label="Popoverrrr"
            size="xs"
          >
            <RtButton use="secondary" label="xs" />
          </RtTooltip>
          <RtTooltip
            alignment="end"
            use="achromatic-ashy"
            label="Popoverrrr"
            size="sm"
          >
            <RtButton use="secondary" label="sm" />
          </RtTooltip>
          <RtTooltip
            alignment="end"
            use="achromatic-ashy"
            label="Popoverrrr"
            size="md"
          >
            <RtButton use="secondary" label="md" />
          </RtTooltip>
          <RtTooltip
            alignment="end"
            use="achromatic-ashy"
            label="Popoverrrr"
            size="lg"
          >
            <RtButton use="secondary" label="lg" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">use</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip use="achromatic-ashy" label="Popoverrrr">
            <RtButton use="secondary" label="achromatic-ashy" />
          </RtTooltip>
          <RtTooltip use="achromatic-cloudy" label="Popoverrrr">
            <RtButton use="secondary" label="achromatic-cloudy" />
          </RtTooltip>
          <RtTooltip use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="primary" />
          </RtTooltip>
          <RtTooltip use="secondary" label="Popoverrrr">
            <RtButton use="secondary" label="secondary" />
          </RtTooltip>
          <RtTooltip use="tertiary" label="Popoverrrr">
            <RtButton use="secondary" label="tertiary" />
          </RtTooltip>
          <RtTooltip use="quaternary" label="Popoverrrr">
            <RtButton use="secondary" label="quaternary" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Alignment = start</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip
            position="top"
            alignment="start"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="top" />
          </RtTooltip>
          <RtTooltip
            position="bottom"
            alignment="start"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="bottom" />
          </RtTooltip>
          <RtTooltip
            position="left"
            alignment="start"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="left" />
          </RtTooltip>
          <RtTooltip
            position="right"
            alignment="start"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="right" />
          </RtTooltip>
          <RtTooltip
            position="leading"
            alignment="start"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="leading" />
          </RtTooltip>
          <RtTooltip
            position="trailing"
            alignment="start"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="trailing" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Alignment = middle</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip position="top" use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="top" />
          </RtTooltip>
          <RtTooltip position="bottom" use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="bottom" />
          </RtTooltip>
          <RtTooltip position="left" use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="left" />
          </RtTooltip>
          <RtTooltip position="right" use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="right" />
          </RtTooltip>
          <RtTooltip position="leading" use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="leading" />
          </RtTooltip>
          <RtTooltip position="trailing" use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="trailing" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Alignment = end</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip
            position="top"
            alignment="end"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="top" />
          </RtTooltip>
          <RtTooltip
            position="bottom"
            alignment="end"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="bottom" />
          </RtTooltip>
          <RtTooltip
            position="left"
            alignment="end"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="left" />
          </RtTooltip>
          <RtTooltip
            position="right"
            alignment="end"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="right" />
          </RtTooltip>
          <RtTooltip
            position="leading"
            alignment="end"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="leading" />
          </RtTooltip>
          <RtTooltip
            position="trailing"
            alignment="end"
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="trailing" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Trigger</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip trigger={['click']} use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="click" />
          </RtTooltip>
          <RtTooltip trigger={['focus']} use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="focus" />
          </RtTooltip>
          <RtTooltip trigger={['hover']} use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="hover" />
          </RtTooltip>
          <RtTooltip
            trigger={['click', 'focus']}
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="click focus" />
          </RtTooltip>
          <RtTooltip
            trigger={['focus', 'hover']}
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="focus hover" />
          </RtTooltip>
          <RtTooltip
            trigger={['click', 'hover']}
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="click hover" />
          </RtTooltip>
          <RtTooltip
            trigger={['click', 'focus', 'hover']}
            use="primary"
            label="Popoverrrr"
          >
            <RtButton use="secondary" label="click focus hover" />
          </RtTooltip>
          <RtTooltip trigger={[]} use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="[ ]" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Disabled</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip use="primary" label="Popoverrrr" disabled>
            <RtButton use="secondary" label="disabled = true" />
          </RtTooltip>
          <RtTooltip use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="disabled = false" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">CloseOnOutsidePress</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip
            use="primary"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            closeOnOutsidePress={false}
            trigger={['click']}
          >
            <RtButton use="secondary" label="closeOnOutsidePress = false" />
          </RtTooltip>
          <RtTooltip
            use="primary"
            position="bottom"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            closeOnOutsidePress={false}
            trigger={['click']}
          >
            <RtButton use="secondary" label="closeOnOutsidePress = false" />
          </RtTooltip>
          <RtTooltip
            use="primary"
            position="left"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            closeOnOutsidePress={false}
            trigger={['click']}
          >
            <RtButton use="secondary" label="closeOnOutsidePress = false" />
          </RtTooltip>
          <RtTooltip
            use="primary"
            position="right"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            closeOnOutsidePress={false}
            trigger={['click']}
          >
            <RtButton use="secondary" label="closeOnOutsidePress = false" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Tail</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip use="primary" label="Popoverrrr">
            <RtButton use="secondary" label="tail = true" />
          </RtTooltip>
          <RtTooltip use="primary" label="Popoverrrr" tail={false}>
            <RtButton use="secondary" label="tail = false" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Animation</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip use="primary" label="Popoverrrr" animation="smooth">
            <RtButton use="secondary" label="smooth" />
          </RtTooltip>
          <RtTooltip use="primary" label="Popoverrrr" animation="slide">
            <RtButton use="secondary" label="slide" />
          </RtTooltip>
          <RtTooltip use="primary" label="Popoverrrr" animation="quick">
            <RtButton use="secondary" label="quick" />
          </RtTooltip>
          <RtTooltip use="primary" label="Popoverrrr" animation="fade">
            <RtButton use="secondary" label="fade" />
          </RtTooltip>
        </div>

        <RtText typography="body-sm-medium">Follow cursor</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtTooltip
            use="primary"
            label="Popoverrrr"
            animation="smooth"
            followCursor
          >
            <RtButton use="secondary" label="smooth" />
          </RtTooltip>
          <RtTooltip
            use="primary"
            label="Popoverrrr"
            animation="slide"
            followCursor
          >
            <RtButton use="secondary" label="slide" />
          </RtTooltip>
          <RtTooltip
            use="primary"
            label="Popoverrrr"
            animation="quick"
            followCursor
          >
            <RtButton use="secondary" label="quick" />
          </RtTooltip>
          <RtTooltip
            use="primary"
            label="Popoverrrr"
            animation="fade"
            followCursor
          >
            <RtButton use="secondary" label="fade" />
          </RtTooltip>
        </div>
      </RtFrame>
    </RtFrame>
  );
}