import { useMemo, useState } from 'react'
import { Card, Col, Row } from 'antd'
import ControlPanel from '../../control-panel'
import ContainerView from './container'
import Toolbar from './toolbar'

export default function BackgroundView() {
  const defaultValue = useMemo(() => {
    return {
      selectedVariant: 'kenburnsTop'
    }
  }, [])
  const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant)

  const onRefresh = () => {
    setSelectedVariant(defaultValue.selectedVariant)
  }
  return (
    <Card>
      <Row>
        <Col xs={24} md={18}>
          <Toolbar onRefresh={onRefresh} />
        </Col>
      </Row>
      <Row justify='space-between'>
        <Col xs={24} md={18}>
          <ContainerView variant={selectedVariant} />
        </Col>
        <Col xs={24} md={5}>
          <ControlPanel
            variantKey={variantKey}
            selectedVariant={selectedVariant}
            onChangeVarient={(varient) => setSelectedVariant(varient)}
          />
        </Col>
      </Row>
    </Card>
  )
}
const variantKey = [
  {
    type: 'kenburns',
    values: ['kenburnsTop', 'kenburnsBottom', 'kenburnsLeft', 'kenburnsRight']
  },
  {
    type: 'pan',
    values: ['panTop', 'panBottom', 'panLeft', 'panRight']
  },
  {
    type: 'color change',
    values: ['color2x', 'color3x', 'color4x', 'color5x']
  }
]
