import React from 'react'
import styled from 'styled-components'
import { IJsonSchema } from '../../types/IJsonSchema'
import { InputWrapper } from '../InputWrapper/InputWrapper'

export type DatePickerProps = {
  value: string
  name?: string
  label?:string
  placeholder?: string
  /**
   * schema for validation
   */
  jsonSchema?: IJsonSchema
  /**
   * custom styling for text input
   */
  css?: string
  onChange: (change: string) => void
}

export const DatePicker = ({
  value,
  name,
  label,
  onChange,
  jsonSchema,
  css,
}: DatePickerProps):JSX.Element => {
  
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange(event.target.value)
  }

  return (
    <InputWrapper 
      label={label} 
      jsonSchema={jsonSchema} >
      <DateInput 
        type="date" 
        value={value?.toString()} 
        onChange={handleChange} 
        css={css} 
        name={name} />
    </InputWrapper>
  )
}

const DateInput = styled.input<{css?:string}>`
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  height: 36px;
  -webkit-tap-highlight-color: transparent;
  line-height: 34px;
  appearance: none;
  resize: none;
  box-sizing: border-box;
    font-size: 1rem;
  color: #000;
  text-align: left;
  min-height: 36px;
  padding-right: 12px;
  border-radius: 4px;
  border: none;
  background-color: #fff;
  transition: border-color 100ms ease 0s;
  cursor: text;
  white-space: nowrap;

 &:focus {
    outline: none;
    border-color: #228be6;
    }
  ::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 5px;
  }
  ::-webkit-datetime-edit { 
    padding: 8px; 
  }
  
  ${(p) => p.css}
`