import { RtDropdown } from '@dpa/react-dropdown';
import { useState } from 'react';
import { RtButton } from '@dpa/react-buttons';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';

export function DropdownPage() {
  const [show, setShow] = useState(false);

  function handleClick() {
    setShow((v) => !v);
  }

  return (
    <RtFrame
      as="div"
      style={{
        width: '500px',
        padding: '20px',
        margin: '10px auto',
        height: '150vh',
      }}
      surface="foundation-tint"
    >
      <div style={{ margin: '15px 0' }} onClick={handleClick}>
        <RtButton use="primary" label={`${show}`} />
      </div>

      <RtDropdown
        use="foggy"
        trigger={['click', 'hover', 'manual']}
        radius="primary"
        model="full"
        position="bottom"
        alignment="end"
        animation="slide"
        show={show}
        size="lg"
        slot={
          <RtText
            typography="symbol-md-primary"
            specification="main"
            as="div"
            style={{ padding: '8px' }}
          >
            Helloa sdfsdf s dfsd f sd fsdf sd
          </RtText>
        }
        closeOnOutsidePress={false}
        onShowChange={(v) => setShow(v)}
      >
        <RtText typography="symbol-md-primary">
          Open Dropdown to hello world
        </RtText>
      </RtDropdown>
    </RtFrame>
  );
}