import { View as PopupView } from '@yandex-lego/components/Popup/__examples__/view.tsx'
import popupViewSources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/view.tsx'
import { Floating as PopupFloating } from '@yandex-lego/components/Popup/__examples__/floating.tsx'
import popupFloatingSources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/floating.tsx'
import { Target as PopupTarget } from '@yandex-lego/components/Popup/__examples__/target.tsx'
import popupTargetSources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/target.tsx'
import { Direction as PopupDirection } from '@yandex-lego/components/Popup/__examples__/direction.tsx'
import popupDirectionSources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/direction.tsx'
import { TailSize as PopupTailSize } from '@yandex-lego/components/Popup/__examples__/tail-size.tsx'
import popupTailSizeSource from '!!raw-loader!@yandex-lego/components/Popup/__examples__/tail-size.tsx'
import { Boundary as PopupBoundary } from '@yandex-lego/components/Popup/__examples__/boundary.tsx'
import popupBoundarySources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/boundary.tsx'
import { ContextMenu as PopupContextMenu } from '@yandex-lego/components/Popup/__examples__/contextmenu.tsx'
import popupContextMenuSources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/contextmenu.tsx'
import { Theme as PopupTheme } from '@yandex-lego/components/Popup/__examples__/theme.tsx'
import popupThemeSources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/theme.tsx'
import { DisableOverlay as PopupDisableOverlay } from '@yandex-lego/components/Popup/__examples__/disable-overlay.tsx'
import popupDisableOverlaySources from '!!raw-loader!@yandex-lego/components/Popup/__examples__/disable-overlay.tsx'

### Виды

`Popup` является контейнером для любого контента и используется в компонентах: `DatePicker`, `DatePickerRange`, `Dropdown`, `MessageBoxPopup`, `Select`, `Tooltip`.

`Popup` используется, когда вы хотите предоставить человеку возможность продолжить взаимодействовать с другими элементами на странице. Не используйте для деструктивных действий, требующих повышенного внимания человека.

`Popup` может использоваться со стилевым оформлением, а так же без стилей

<Example component={PopupView} source={popupViewSources}>
  <Title>View</Title>
  <Description>
    Чтобы изменить вид попапа, установите свойство `view` в значение `"default"`. Чтобы совсем убрать стилевое
    оформление, установите свойство `nonvisual` в значение `true` и задайте свои стили, если это необходимо
  </Description>
</Example>

### Типы

В Лего существуют два типа компонета:

1. `Popup` без `Tail` (хвостика), используется для любых всплывающих окон и в составных компонентах. По умолчанию `Popup` отрисовывается без хвостика
1. `Popup` с хвостиком `hasTail` чаще всего используется в подсказках и других якорных компонентах

<Example component={PopupFloating} source={popupFloatingSources} />

### Привязки

Чтобы `Popup` прикреплялся к нужному элементу, установите свойство `target` в значение `"anchor"`, а в свойстве `"anchor"` укажите нужный элемент

<Example component={PopupTarget} source={popupTargetSources} />

### Направления

Popup может открываться в разных направлениях от `"anchor"`, поведение можно контролировать с помощью свойств `direction`, если вы хотите, чтобы `Popup` подстраивался автоматически, не устанавливайте `direction`

<Example component={PopupDirection} source={popupDirectionSources}>
  <Title>Direction</Title>
  <Description>
    Чтобы задать направление раскрытия попапа, установите свойство `direction` с одним или несколькими вариантами
    следующих значений: `"top-start"`, `"top"`, `"top-end"`, `"right-start"`, `"right"`, `"right-end"`,
    `"bottom-start"`, `"bottom"`, `"bottom-end"`, `"left-start"`, `"left"`, `"left-end"`
  </Description>
</Example>

### Размеры

У `Tail` (хвостика) могут быть разные размеры. Если вы используете `Popup` c компактным контентом, используйте размер `"12px"`, по мере увеличения объема контента, пользуйтесь размерами `"20px"`, `"26px"`

<Example component={PopupTailSize} source={popupTailSizeSource}>
  <Title>Tail Size</Title>
  <Description>Чтобы изменить размер хвостика установите свойство `tailSize` с необходимым значением</Description>
</Example>

### Границы отображения

Чтобы задать границы отображения попапа, используйте свойство `boundary`. Это может быть полезно, когда якорь находится внутри контейнера с `overflow: hidden` или вы хотите явно задать границы отображения. По-умолчанию, попап автоматически пытыется найти ближайшего родителя относительно якоря со свойством `overflow`

<Example component={PopupBoundary} source={popupBoundarySources} />

### Виртуальный элемент

Для некоторых сценариев вам может понадобится привязать `Popup` например, к указателю мыши. Для этого есть вспомогательный React-хук `useVirtualElementRef`, который принимает координаты, относительно `viewport` в виде `{ top: number; left: number; bottom: number; right: number }`

```tsx
import { useVirtualElementRef } from '@yandex-lego/components/usePopper'

const Example = () => {
  // `right` и `bottom` по-умолчанию будут равны `left` и `top` соответственно
  const anchorRef = useVirtualElementRef({ rect: { left: 50, top: 50 } })

  return <Popup target="anchor" anchor={anchorRef} />
}
```

Ниже представлен пример с простой реализацией контекстного меню

<Example component={PopupContextMenu} source={popupContextMenuSources} />

### Классический дизайн

Чтобы использовать предыдущую версию дизайна контролов вопользуйтесь модификатором `theme`

<Disclaimer>
  Важно! Модификаторы **view** и **theme** являются взаимоисключающими. Не используйте их вместе. Модификатор **theme**
  не кастомизируется с помощью дизайн-токенов.
</Disclaimer>

<Example component={PopupTheme} source={popupThemeSources}>
  <Title>Theme</Title>
  <Description>
    Чтобы задать тему попапа, установите свойство `theme` в одно из следующих значений: `"normal"`, `"clear"`
  </Description>
</Example>

### Отключение оверлея

Пример ниже демонстрирует использование компонента `Popup` без использования оверлея

<Example component={PopupDisableOverlay} source={popupDisableOverlaySources}>
  <Title>Disable Overlay</Title>
  <Description>
    Чтобы отключить оверлей используется проп `disableOverlay`
  </Description>
</Example>