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

import {
  DefaultInterface
} from "../../common/helpers/Theme"
import {
  MediaQuery
} from "../../common/helpers/MediaQuery"
import {
  CustomComponent
} from "../../core"

import {
  Div
} from "../../core/Div"
import {
  Select
} from "../../core/Select"
import {
  Paragraph
} from "../../core/Paragraph"

interface FormSelectInterface extends DefaultInterface {
  icon?: string
  value?: string
}

const FormSelectBase: React.FunctionComponent<FormSelectInterface> = (props): ReactElement => {
  const {
    isValid,
    placeholder,
    warning,
    children,
    value,
    onChange
  } = props

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

  delete newProps.children
  delete newProps.themed
  delete newProps.isValid
  delete newProps.touched

  return (
    <Div {...newProps}>
      <Select placeholder={placeholder} value={value} onChange={onChange}>
        { children }
      </Select>

      <Paragraph>
        { !isValid && warning ? warning : '' }
      </Paragraph>
    </Div>
  )
}

const Component: React.FunctionComponent<FormSelectInterface> = styled(FormSelectBase)`
  margin-bottom: 10px;
  position: relative;

  > select {
    flex: none;
    margin-bottom: 2px;
  }

  > label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 16px;
    flex: 1;
    height: 16px;
    min-height: 16px;
    width: 100%;

    ${MediaQuery.xlarge} {
      font-size: 13px;
    }

    ${ props => props.icon && !props.label && props.placeholder && `
      > .icon {
        position: absolute;
        left: ${ props.placeholder.length * 11.5 }px;
        top: 21px;
      }
    ` }

    > .icon {
      width: 13px;
      height: 13px;
      pointer-events: none;
      background: ${ props => props.theme && props.theme.global.color.white };
      flex: 1;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 10px;
      margin-top: 1.5px;

      > img {
        max-height: 13px;
        min-height: 13px;
        min-width: 13px;
        max-width: 13px;
        width: auto;
        height: auto;
      }
    }
  }

  > p {
    transition: all .5s;
    opacity: 1;
    color: ${ (props) => props.theme && props.theme.global.color.red2 };
    font-size: 11px;
    line-height: 13px;
    min-height: 13px;
  }

  ${MediaQuery.xlarge} {
    margin-bottom: 20px;

    > p {
      font-size: 13px;
    }
  }

  &:last-child {
    margin-bottom: 0px;
  }
`

export const FormSelect: React.FunctionComponent<FormSelectInterface> = (formSelectProps): ReactElement => <CustomComponent {...formSelectProps} callback={(props: FormSelectInterface) => <Component {...props} />} />