import React from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import Checkbox from '@material-ui/core/Checkbox';
import Switch from '@material-ui/core/Switch';
import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';

import { etiqueta } from '../Odipar/common';
import { Chip } from '@material-ui/core';
import MomentUtils from '@date-io/moment';
import moment from 'moment'
import 'moment/locale/es'
moment.locale('es');

/* Textfield */
export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => (
  <TextField
    {...rest}
    {...input}
    error={touched && Boolean(error)}
  />
);

TextFieldRedux.propTypes = {
  input: PropTypes.object.isRequired,
  meta: PropTypes.object,
};

TextFieldRedux.defaultProps = {
  meta: null,
};
/* End */

/* Select */
export const SelectRedux = ({ input, children, ...rest }) => (
  <Select
    {...input}
    {...rest}
  >
    {children}
  </Select>
);

SelectRedux.propTypes = {
  input: PropTypes.object.isRequired,
  children: PropTypes.node.isRequired,
};
/* End */

/* Checkbox */
export const CheckboxRedux = ({ input, ...rest }) => (
  <Checkbox
    checked={input.value === '' ? false : input.value}
    {...input}
    {...rest}
  />
);

CheckboxRedux.propTypes = {
  input: PropTypes.object.isRequired,
};
/* End */

/* Switch */
export const SwitchRedux = ({ input, ...rest }) => (
  <Switch
    checked={input.value === '' ? false : input.value}
    {...input}
    {...rest}
  />
);

SwitchRedux.propTypes = {
  input: PropTypes.object.isRequired,
};
/* End */

export const DatePickerRedux = ({ input, label, readonly}) => (
  
  <MuiPickersUtilsProvider locale={'es'} utils={MomentUtils}>
  <DateTimePicker
      format="DD/MM/YYYY hh:mm A"
      autoOk
      onChange={date => input.onChange(moment(date).format("DD/MM/YYYY hh:mm A"))}
      value={input.value ? moment(input.value,"DD/MM/YYYY hh:mm A"): null}
      label={label}
      readOnly = {readonly}
      disabled = {readonly}
  />
  </MuiPickersUtilsProvider>
);

export const EstadoRedux = ({input, label}) => {
  const value = input.value? input.value : 0
  return etiqueta("etiq_pedido", value)
}