import { RtSlidePanel } from '@dpa/react-slide-panel';
import { RtFrame } from '@dpa/react-frame-intro';
import { useState } from 'react';

const data1 = [
  { id: 'id-1-1', title: 'elem-1' },
  { id: 'id-1-2', title: 'elem-2' },
  { id: 'id-1-3', title: 'elem-3' },
  { id: 'id-1-4', title: 'elem-4' },
  { id: 'id-1-5', title: 'elem-5' },
  { id: 'id-1-6', title: 'elem-6' },
];

const data2 = [
  { id: 'id-2-1', title: 'elem-1' },
  { id: 'id-2-2', title: 'elem-2' },
  { id: 'id-2-3', title: 'elem-3' },
];

const data3 = [
  { id: 'id-3-1', title: 'elem-1' },
  { id: 'id-3-2', title: 'elem-2' },
  { id: 'id-3-3', title: 'elem-3' },
];

export const SlidePanelPage = () => {
  const [id, setId] = useState('id-1-1');

  return (
    <div>
      <div style={{ display: 'flex', gap: 100, padding: 100 }}>
        <div>див слева</div>
        <div style={{ width: 300, height: 50 }}>
          <RtSlidePanel activeId={id}>
            {data1.map((item) => (
              <RtFrame
                key={item.id}
                as="div"
                surface="foundation-low-tint"
                modifier="coloring"
                style={{ zIndex: 1, minWidth: 100, background: 'transparent' }}
              >
                {item.title}
              </RtFrame>
            ))}
          </RtSlidePanel>
        </div>
        <div onClick={() => setId('id-1-2')}>див справа</div>
      </div>

      <div style={{ display: 'flex', gap: 100, padding: 100 }}>
        <div>див слева</div>
        <RtSlidePanel activeId={data2[0].id} interactionOnHover>
          {data2.map((item) => (
            <RtFrame
              key={item.id}
              as="div"
              surface="foundation-low-tint"
              modifier="coloring"
              style={{ zIndex: 1, background: 'transparent' }}
            >
              {item.title}
            </RtFrame>
          ))}
        </RtSlidePanel>
        <div>див справа</div>
      </div>

      <div style={{ display: 'flex', gap: 100, padding: 100 }}>
        <div>див слева</div>
        <div style={{ width: 300, height: 50 }}>
          <RtSlidePanel activeId={data3[0].id} direction="vertical">
            {data3.map((item) => (
              <RtFrame
                key={item.id}
                as="div"
                surface="foundation-low-tint"
                modifier="coloring"
                style={{ zIndex: 1, minWidth: 100, background: 'transparent' }}
              >
                {item.title}
              </RtFrame>
            ))}
          </RtSlidePanel>
        </div>
        <div>див справа</div>
      </div>
    </div>
  );
};