import React, { useContext } from "react";
import styled from "styled-components";
import { Button, TextInput } from "..";
import { useNavigate } from "react-router-dom";
import { GUIClientContext } from "../../App";
import { useDispatch } from "react-redux";
import { setShowDialog } from "../../redux/slices/uiStateSlice";

const GridDiv = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  align-items: center;
`;

function FTCDialog() {
  const navigate = useNavigate();
  const [apiKey, setApiKey] = React.useState("");
  const client = useContext(GUIClientContext);
  const dispatch = useDispatch();

  return (
    <div className="p-4">
      <h3>Free Trial Limit Reached</h3>
      <p>
        You've reached the free trial limit of 250 free inputs with Continue's
        OpenAI API key. To keep using Continue, you can either use your own API
        key, or use a local LLM. To read more about the options, see our{" "}
        <a
          href="https://continue.dev/docs/customization/models"
          target="_blank"
        >
          documentation
        </a>
        . If you're just looking for fastest way to keep going, type '/config'
        to open your Continue config file and paste your API key into the
        OpenAIFreeTrial object.
      </p>

      <TextInput
        type="text"
        placeholder="Enter your OpenAI API key"
        value={apiKey}
        onChange={(e) => setApiKey(e.target.value)}
      />
      <GridDiv>
        <Button
          onClick={() => {
            navigate("/models");
          }}
        >
          Select model
        </Button>
        <Button
          disabled={!apiKey}
          onClick={() => {
            client?.addModelForRole("*", "OpenAI", {
              model: "gpt-4",
              api_key: apiKey,
              title: "GPT-4",
            });
            dispatch(setShowDialog(false));
          }}
        >
          Use my API key
        </Button>
      </GridDiv>
    </div>
  );
}

export default FTCDialog;