/** @format */

import { Select } from 'antd';
import _ from 'lodash';
import moment from 'moment';
import React, { useEffect, useState } from 'react';

import { DispatchEvent } from '../../../utils';
import { AttrType } from './data';
import { Container } from './styled';
const { Option } = Select;

const EVENT_Select_Input_Select = 'event-select-input-select';

const SelectInput = (props: AttrType) => {
  const { size, id, select, input, data } = props;

  function onChange(value: any) {
    DispatchEvent(id, EVENT_Select_Input_Select, {
      value: value,
    });
  }

  const userDefinedProps = {
    placeholder: input.placeHolder,
  };

  return (
    <Container id={id} size={size} select={select} input={input} data={data}>
      <Select
        {...userDefinedProps}
        style={size}
        onChange={onChange}
        getPopupContainer={trigger => trigger.parentElement || document.body}
      >
        {data &&
          data.length > 0 &&
          data.map((item: any) => {
            return (
              <Option value={item.value} key={item.label}>
                {item.label}
              </Option>
            );
          })}
      </Select>
    </Container>
  );
};

export default SelectInput;