import React, { useState } from "react";
import PropTypes from "prop-types";
import {
  CreateOfferFormContainer,
  FieldLabel,
  Scroller,
  // ImageListStyled,
} from "./SecondPartCreateOffer.styled";
import ImagePicker from "../../../ImagePicker/ImagePicker";
// import Select from "../../../Select/Select";
import Option from "../../../Select/Option/Option";
import { SelectAltText, SelectField, SelectText } from "../CreateOffer.styled";
import { NextButton } from "../FirstPart/FirstPartCreateOffer.styled";
import selectedTheme from "../../../../themes";
import { conditionSelectEnum } from "../../../../enums/conditionEnum";

const SecondPartCreateOffer = () => {
  const [images, setImages] = useState([null, null, null]); // 3 images
  const setImage = (index, image) => {
    setImages((prevState) => {
      let newState = [...prevState];
      newState[index] = image;
      return [...newState];
    });
  };

  return (
    <CreateOfferFormContainer>
      <Scroller>
        {images.map((item, index) => (
          <ImagePicker
            key={index}
            image={item}
            setImage={(image) => setImage(index, image)}
            deleteImage={() => setImage(index, null)}
          />
        ))}
      </Scroller>
      <FieldLabel leftText="STANJE" />
      <SelectField defaultValue={conditionSelectEnum.NEW.value}>
        {Object.keys(conditionSelectEnum).map((key) => {
          var item = conditionSelectEnum[key];
          return (
            <Option value={item.value} key={item.value}>
              <SelectText>{item.mainText}</SelectText>
              <SelectAltText>{item.altText}</SelectAltText>
            </Option>
          );
        })}
      </SelectField>

      <NextButton
        type="submit"
        variant="contained"
        height="48px"
        fullWidth
        buttoncolor={selectedTheme.primaryPurple}
        textcolor="white"
        //   disabled={
        //     formik.values.username.length === 0 ||
        //     formik.values.password.length === 0
        //   }
      >
        NASTAVI
      </NextButton>
    </CreateOfferFormContainer>
  );
};

SecondPartCreateOffer.propTypes = {
  children: PropTypes.node,
  handleOffer: PropTypes.func,
};

export default SecondPartCreateOffer;