import React, {
  ReactElement
} from 'react'
import styled from 'styled-components'

import {
  DefaultInterface,
  ComponentResponsiveStyled
} from "./../../common/helpers/Theme"
import {
  CustomComponent
} from "../"

export interface SelectBaseInterface extends DefaultInterface {
  styles?: any
  value?: string
}

function SelectBase(props: SelectBaseInterface): ReactElement {
  const {
    children
  } = props

  const newProps = Object.assign({}, {...props})

  delete newProps.children
  delete newProps.themed
  delete newProps.native

  return (
    <select {...newProps}>
      { children }
    </select>
  )
}

const Component: React.FunctionComponent<SelectBaseInterface> = styled(SelectBase)`
  ${ props => ComponentResponsiveStyled(props, 'select') }

  width: 100%;
  transition: all .5s;

  &&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: ${ props => props.styles && props.styles.select.default.font.color.smallest || props.theme && props.theme.select.default.font.color.smallest };
  }

  &&:-ms-select-placeholder { /* Internet Explorer 10-11 */
    color: ${ props => props.styles && props.styles.select.default.font.color.smallest || props.theme && props.theme.select.default.font.color.smallest };
  }

  &&::-ms-select-placeholder { /* Microsoft Edge */
    color: ${ props => props.styles && props.styles.select.default.font.color.smallest || props.theme && props.theme.select.default.font.color.smallest };
  }

  > option {
    color: ${ props => props.styles && props.styles.select.default.font.color.smallest || props.theme && props.theme.select.default.font.color.smallest };
  }
`

export const Select: React.FunctionComponent<SelectBaseInterface> = (selectProps): ReactElement => {
  const {
    native = false
  } = selectProps

  return !native
    ? <CustomComponent {...selectProps} callback={(props: SelectBaseInterface) => <Component {...props} /> } />
    : <SelectBase {...selectProps} />
}