import React, { useState } from "react";

import ProgressIndicator from "./stories/ProgressIndicator";

import Header2 from "./stories/Header2";

import Button from "./stories/Button";
import IconArrow from "./stories/IconArrow";

import Label from "./stories/Label";
import Input from "./stories/Input";
import Select from "./stories/Select";

import CenteredContainer from "./stories/utilities/CenteredContainer";
import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
import Spacer from "./stories/utilities/Spacer";
import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";

const SecretCreationPage2 = () => {
  const [recipientInput, setRecipientInput] = useState("");
  const [serviceSelect, setServiceSelect] = useState("");

  const handleRecipientInputChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setRecipientInput(e.target.value);
  };

  const handleServiceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setServiceSelect(e.target.value);
  };

  return (
    <CenteredContainer fullscreen>
      <CenteredContainer>
        <ProgressIndicator currentProgress={2} />
        <Header2>Tell Someone</Header2>
        <SpaceBetweenContainer>
          <Label htmlFor="recipientInput">Who gets to know the secret?</Label>
          <Label htmlFor="recipientInput">Required*</Label>
        </SpaceBetweenContainer>
        <Input
          variant="primary"
          id="recipientInput"
          value={recipientInput}
          onChange={handleRecipientInputChange}
          placeholder="Username or Email"
        />
        <Spacer space="2.5rem" />
        <TextAlignWrapper align="left">
          <Label htmlFor="serviceSelector">
            What type of account is the above username or email associated with?
          </Label>
        </TextAlignWrapper>
        <Select
          id="serviceSelector"
          onChange={handleServiceChange}
          value={serviceSelect}
        />
        <Spacer space="3rem" />
        <SpaceBetweenContainer>
          <Button variant="secondary" onClick={() => {}}>
            <IconArrow arrowDirection="left" />
          </Button>
          <Button onClick={() => {}}>Generate Secret Code</Button>
        </SpaceBetweenContainer>
      </CenteredContainer>
    </CenteredContainer>
  );
};

export default SecretCreationPage2;