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

const text = 'Первая строка\nВторая строка';

export function PopoverPage() {
  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">RtPopover</RtText>

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

        <RtText typography="body-sm-medium">use</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtPopover
            use="achromatic-ashy"
            label={'Первая строка\nВторая строка'}
            subLabel="subLabel"
          >
            <RtButton use="secondary" label="achromatic-ashy" />
          </RtPopover>
          <RtPopover
            use="achromatic-cloudy"
            label="Popoverrrr"
            subLabel="subLabel"
          >
            <RtButton use="secondary" label="achromatic-cloudy" />
          </RtPopover>
          <RtPopover use="primary" label="Popoverrrr" subLabel="subLabel">
            <RtButton use="secondary" label="primary" />
          </RtPopover>
          <RtPopover use="secondary" label="Popoverrrr" subLabel="subLabel">
            <RtButton use="secondary" label="secondary" />
          </RtPopover>
          <RtPopover use="tertiary" label="Popoverrrr" subLabel="subLabel">
            <RtButton use="secondary" label="tertiary" />
          </RtPopover>
          <RtPopover use="quaternary" label="Popoverrrr" subLabel="subLabel">
            <RtButton use="secondary" label="quaternary" />
          </RtPopover>
        </div>

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

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

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

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

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

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

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

        <RtText typography="body-sm-medium">Max Width</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtPopover
            use="primary"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            subLabel="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
          >
            <RtButton use="secondary" label="maxWidth none" />
          </RtPopover>
          <RtPopover
            use="primary"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            subLabel="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            maxWidth="100px"
          >
            <RtButton use="secondary" label="maxWidth 100px" />
          </RtPopover>
          <RtPopover
            use="primary"
            label="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            subLabel="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            maxWidth="250px"
          >
            <RtButton use="secondary" label="maxWidth 250px" />
          </RtPopover>
        </div>

        <RtText typography="body-sm-medium">Should Use Safe Polygon</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
          }}
        >
          <RtPopover
            use="primary"
            label="Popoverrrr"
            subLabel="subLabel"
            shouldUseSafePolygon={false}
          >
            <RtButton use="secondary" label="shouldUseSafePolygon false" />
          </RtPopover>
          <RtPopover
            use="primary"
            label="Popoverrrr"
            subLabel="subLabel"
            shouldUseSafePolygon
          >
            <RtButton use="secondary" label="shouldUseSafePolygon true" />
          </RtPopover>
        </div>

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

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