import { useState } from 'react'
import styled from 'styled-components'

import { ColorPick, ColorGradientPick } from './Options'
import ImageGallery from '../../ImageGallery'

const Select = styled.select`
  position: absolute;
  top: 10px;
  right: 10px;
  height: 24px;
`

const Image = styled.img`
  display: block;
  width: auto;
  max-height: 200px;
  margin-top: 10px;
`

const BackgroundInner = ({ props, selected }) => {
  const { id, value } = props;

  switch (selected) {
    case 'color':
      return (
        <ColorPick props={props} />
      )
    case 'gradient':
      return (
        <ColorGradientPick props={props} />
      )
    case 'image':
      const image = value.substring(4, value.length - 1);
      return (
        <>
          <Image src={image} alt="Preview" width={"50"} height={"50"} />
          <ImageGallery id={id} />
        </>
      )
    default:
      return;
  }
}

function Background({ props }) {
  const selects = props.settings.selects;
  const [selected, setSelected] = useState(props.selected);

  const valueChange = (evt) => {
    setSelected(evt.target.value);
  }

  return (
    <>
      <Select value={selected} onChange={valueChange}>
        {
          selects.map((select, index) => <option value={select} key={index}>{select}</option>)
        }
      </Select>
      <BackgroundInner props={props} selected={selected} />
    </>
  )
}

export default Background