import { View as MessageBoxView } from '@yandex-lego/components/MessageBox/__examples__/view.tsx'
import messageBoxViewSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/view.tsx'
import { Size as MessageBoxSize } from '@yandex-lego/components/MessageBox/__examples__/sizes.tsx'
import messageBoxSizeSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/sizes.tsx'
import { Corners as MessageBoxCorners } from '@yandex-lego/components/MessageBox/__examples__/corner.tsx'
import messageBoxCornersSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/corner.tsx'
import { Buttons as MessageBoxButtons } from '@yandex-lego/components/MessageBox/__examples__/buttons.tsx'
import messageBoxButtonsSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/buttons.tsx'
import { Complex as MessageBoxComplex } from '@yandex-lego/components/MessageBox/__examples__/complex.tsx'
import messageBoxComplexSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/complex.tsx'
import { Layout as MessageBoxLayout } from '@yandex-lego/components/MessageBox/__examples__/layout.tsx'
import messageBoxLayoutSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/layout.tsx'
import { WithPopup as MessageBoxWithPopup } from '@yandex-lego/components/MessageBox/__examples__/withPopup.tsx'
import messageBoxWithPopupSource from '!!raw-loader!@yandex-lego/components/MessageBox/__examples__/withPopup.tsx'

### Вид компонента

Чтобы изменить вид компонента, установите свойство `view` в одно из следующих значений: `"default"`, `"inverse"`, `"promo"` (Компонент появится при нажатии на кнопку в примере).

<Example
    component={MessageBoxView}
    source={messageBoxViewSource}
/>

### Размер компонента

Чтобы изменить размер компонента, установите свойство `size` в одно из следующих значений: `"s"`, `"m"`, `"l"`.

<Example
    component={MessageBoxSize}
    source={messageBoxSizeSource}
/>

### Уголки

Чтобы добавить компоненту произвольный компонент в угол, передайте нужный элемент в свойство `corners`.

```tsx
import {
  MessageBox,
  Corner,
} from '@yandex-lego/components/MessageBox/desktop/bundle'

<MessageBox
  view="default"
  size="m"
  corner={
    <Corner width={42} side="bottom-right">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49">
        <path
          fill="#ffd426"
          stroke="#f6cf2e"
          d="M17.644 34.455l9.906 13.912 4.949-16.171
          16.296-4.911-14.02-9.83.167-16.948-13.614
          10.096L5.135 5.039l5.606 16.07L.567
          34.62z"
        />
      </svg>
    </Corner>
  }
/>
```


<Example
    component={MessageBoxCorners}
    source={messageBoxCornersSource}
/>


### Кнопки действий

Чтобы добавить кнопки, установите свойство `actions` с необходимым набором кнопок.

```ts
<MessageBox
  view="default"
  size="m"
  actions={
    <>
      <Button view="clear" size="m">
        Отклонить
      </Button>
      <Button view="action" size="m">
        Принять
      </Button>
    </>
  }
>
  Новая почта с классными темами теперь для вас!
</MessageBox>
```

<Example
    component={MessageBoxButtons}
    source={messageBoxButtonsSource}
/>

### Составной компонент

Чтобы добавить произвольный фон, установите свойство `background` с необходимым изображением.

В составе так же есть вспомогательный компонент `Wrapper`, который позволяет размещать текст или разметку - слева, справа или по центру.

```tsx
import {
  MessageBox,
  Wrapper,
} from '@yandex-lego/components/MessageBox/desktop/bundle'

<MessageBox
  view="default"
  size="m"
  background={
    <img
      style={{ filter: 'opacity(.5)', width: '100%' }}
      src="//avatars.mds.yandex.net/get-dialogs/1676983/7bdc8b36f13ce872e360/catalogue-banner-x3"
    />
  }
>
  <Wrapper leading="текст слева" trailing="текст справа">
    текст по центру
  </Wrapper>
</MessageBox>
```

<Example
    component={MessageBoxComplex}
    source={messageBoxComplexSource}
/>

### Раскладка компонента

Чтобы изменить раскладку компонента, установите свойство `layout` в одно из допустимых значений:

- `layout="plain"` — Используется для уведомлений и того, что не требует пользовательского взаимодействия (используется по умолчанию).
- `layout="tooltip"` — Используется для создании различного рода подсказок.
- `layout="functional"` — Используется для создания интерактивного компонента.

<Example
    component={MessageBoxLayout}
    source={messageBoxLayoutSource}
/>

### MessageBox + Popup

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

```tsx
import { MessageBoxPopup } from '@yandex-lego/components/MessageBox/desktop/bundle'

<MessageBoxPopup
  visible
  hasTail
  anchor={anchorRef}
  direction="top-center"
  view="default"
  size="s"
>
  top-center
</MessageBoxPopup>
```

<Example
    component={MessageBoxWithPopup}
    source={messageBoxWithPopupSource}
/>