import { useRef, useState } from 'react'
import { Text } from 'react-native'
import Carousel from '../Carousel'
import { Div, Span, Row } from '@startupjs/ui'

# Carousel

```js
import Carousel from '@dmapper/carousel'
```

## Простой пример

Все что нужно для использования - закинуть в Carousel children
Такой пример карусели, используется в инстаграме для сторис, у чилдренов нет четких границ, такая карусель должна быть адаптивна для всех расшириниях и устройствах

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 180,
  width: 200,
  paddingLeft: 4,
  paddingRight: 4
}
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel style={carouselStyle}>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

Так же можно задавать чилдренам разнное значение ширины, компонент знает как обработать данный кейс

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 180,
  width: 200,
  paddingLeft: 4,
  paddingRight: 4
}
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel style={carouselStyle}>
    <Div style={{ ...caseStyle, width: 120 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 200 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 240 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 150 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 240 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 150 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

## Адаптивность

Если же нужны четкие границы
Для этого есть свойство - isResponsive (по умолчанию - false)
В связке с этим свойством, каждому чилдрену необходимо передавать - minWidth и maxWidth
Компонент сам рассчитает сколько блоков нужно отобразить для конкретного разрешения
К примеру при minWidth 100 и maxWidth 500, на десктопе будет 2 блока, на мобильных разрешениях 1

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 180,
  paddingLeft: 4,
  paddingRight: 4,
  minWidth: 100,
  maxWidth: 500
}
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel style={carouselStyle} isResponsive={true}>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

Чтобы всегда испольвовать 1 блок, в minWidth чилдренов можно предать 100%

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 180,
  paddingLeft: 4,
  paddingRight: 4,
  minWidth: '100%'
}
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel style={carouselStyle} isResponsive={true}>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

## Бесконечная прокрутка

Задается свойством isEndless (по умолчанию - false)
Без свойства isResponsive, бесконечная прокрутка работает только на нажатия стрелками

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 180,
  paddingLeft: 4,
  paddingRight: 4,
  minWidth: 100,
  maxWidth: 500
}
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel style={carouselStyle} isEndless={true}>
    <Div style={{ ...caseStyle, width: 400 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 260 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 320 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 200 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 140 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'green' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 180 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'black' }} />
    </Div>
  </Carousel>
)
```

Со свойством isResponsive, работает и через swipe

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 180,
  paddingLeft: 4,
  paddingRight: 4,
  minWidth: 100,
  maxWidth: 500
}
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel
    style={carouselStyle}
    isResponsive={true}
    isEndless={true}
    hasDots={true}
  >
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

## Swipe

Возможность прокручивать мышкой/пальцем задается свойством isSwipe
По умолчанию - true, и его всегда можно отключить:

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = { height: 180, paddingLeft: 4, paddingRight: 4 }
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel style={carouselStyle} isSwipe={false}>
    <Div style={{ ...caseStyle, width: 400 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 260 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 320 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={{ ...caseStyle, width: 200 }}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

## Отображение стрелок и точек

Задается свойствами hasArrows (по умолчанию - true) и hasDots (по умолчанию - false)
Без isResponsive - hasDots всегда false

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = { minWidth: '100%', height: 180, paddingLeft: 4, paddingRight: 4 }
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel
    style={carouselStyle}
    hasArrows={false}
    hasDots={true}
    isResponsive={true}
  >
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

## Авто пролистование

Задается свойством isLoop (по умолчанию - false)

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = { minWidth: '100%', height: 180, paddingLeft: 4, paddingRight: 4 }
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel
    style={carouselStyle}
    hasDots={true}
    isLoop={true}
    isEndless={true}
    isResponsive={true}
  >
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
  </Carousel>
)
```

## Стартовое значение

Задается свойством startIndex (Number)

```jsx example noscroll
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = { minWidth: '100%', height: 180, paddingLeft: 4, paddingRight: 4 }
const itemStyle = { width: '100%', height: '100%' }

return (
  <Carousel
    style={carouselStyle}
    hasDots={true}
    isResponsive={true}
    startIndex={2}
  >
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'green' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'black' }} />
    </Div>
  </Carousel>
)
```

## Стилизация стрелок

Задается с помощью - arrowBackStyle, arrowNextStyle

```jsx example noscroll
const carouselStyle = { width: '80%', alignSelf: 'center' }
const caseStyle = { width: 200, height: 180, paddingLeft: 4, paddingRight: 4 }
const itemStyle = { width: '100%', height: '100%' }
const arrowBackStyle = {
  left: -50,
  backgroundColor: 'transpornant',
  border: '1px solid #333333',
  color: '#333333'
}
const arrowNextStyle = {
  right: -50,
  backgroundColor: 'transpornant',
  border: '1px solid #333333',
  color: '#333333'
}

return (
  <Carousel
    style={carouselStyle}
    arrowBackStyle={arrowBackStyle}
    arrowNextStyle={arrowNextStyle}
  >
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'green' }} />
    </Div>
    <Div style={caseStyle}>
      <Div style={{ ...itemStyle, backgroundColor: 'black' }} />
    </Div>
  </Carousel>
)
```

Если нужна полная кастомизация стрелок или точек, можно передать ref, в нем будут содержаться функции для переключения: toBack, toNext, toIndex

```jsx example noscroll
const ref = useRef()
const [slide, setSlide] = useState(0)
const carouselStyle = { width: '100%', marginLeft: 4, marginRight: 4 }
const caseStyle = {
  minWidth: '100%',
  width: 200,
  height: 180,
  paddingLeft: 4,
  paddingRight: 4
}
const itemStyle = { width: '100%', height: '100%' }
const arrowStyle = {
  backgroundColor: '#333',
  alignItems: 'center',
  justifyContent: 'center',
  height: 20,
  width: 20,
  paddingBottom: 2
}

const dotStyle = {
   backgroundColor: '#333',
   width: 10,
   height: 10,
   border: '2px solid #333',
   marginLeft: 2,
   marginRight: 2,
   borderRadius: 30
}

const data = [
  { backgroundColor: 'blue' },
  { backgroundColor: 'red' },
  { backgroundColor: 'yellow' },
  { backgroundColor: 'gray' },
  { backgroundColor: 'green' },
  { backgroundColor: 'black' }
]

return (
  <Div style={{ overflow: 'hidden' }}>
    <Row style={{ marginBottom: 4 }}>
      <Div style={arrowStyle} onPress={()=> ref.current.toBack()}>
        <Text style={{ color: '#fff' }}>{'<'}</Text>
      </Div>
      <Div style={arrowStyle} onPress={()=> ref.current.toNext()}>
        <Text style={{ color: '#fff' }}>{'>'}</Text>
      </Div>
    </Row>
    <Carousel
      ref={ref}
      style={{ marginLeft: -4, marginRight: -4 }}
      hasArrows={false}
      isResponsive={true}
      onChange={v => setSlide(v)}
    >
      {
        data.map((item, index) => (
          <Div key={index} style={caseStyle}>
            <Div style={{ ...itemStyle, ...item }} />
          </Div>
        ))
      }
    </Carousel>
    <Row style={{ alignSelf: 'center', marginTop: 8 }}>
      {
        data.map((item, index) => (
          <Div
            key={index}
            style={{
              ...dotStyle,
              ...(slide === index ? { backgroundColor: '#fff' } : {})
            }}
            onPress={()=> ref.current.toIndex(index)}
          />
        ))
      }
    </Row>
  </Div>
)
```

## Вертикальный режим

```jsx example
const carouselStyle = { marginLeft: 4, marginRight: 4 }
const caseStyle = {
  height: 56,
  width: 72,
  paddingLeft: 4,
  paddingRight: 4
}

const itemStyle = {
  width: '100%',
  height: '100%',
  justifyContent: 'center',
  alignItems: 'center'
}

const textStyle = { color: '#fff' }

const data = new Array(24).fill(true).map(Number)

return (
  <Carousel
    style={{ height: 240, width: 72 }}
    variant='vertical'
    isEndless
    hasArrows
  >
    {
      data.map((item, index) => (
        <Div key={index} style={caseStyle}>
          <Div style={itemStyle}>
            <Span>{index + 1}</Span>
          </Div>
        </Div>
      ))
    }
  </Carousel>
)
```