'use client';

import * as React from 'react';
import clsx from 'clsx';
import { Transition } from '@headlessui/react';

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

import styles from './section.module.css';

const DevStepsItem = [
  {
    id: 'cluster',
    title: 'Connect to a TiDB cloud cluster',
    code: `engine = create_engine(your_tidb_url)`,
  },
  {
    id: 'store',
    title: 'Create table and vector index',
    code: `class Entity(Base):
    __tablename__ = "entity"

    id = Column(Integer, primary_key=True)
    content = Column(Text)
    content_vec = Column(
        VectorType(dim=dim_of_embedding_model),
        comment="hnsw(distance=l2)"
    )

Base.metadata.create_all(engine)`,
  },
  {
    id: 'vector',
    title: 'Create embedding vector and save data',
    code: `content = 'TiDB is an open-source distributed SQL database'

open_ai_client = openai.OpenAI(api_key=open_ai_api_key)
embedding = open_ai_client.embeddings.create(
   input=[content], model=model_name).data[0].embedding

with Session(engine) as session:
   session.add(Entity(content = content, content_vec = embedding))
   session.commit()
`,
  },
  {
    id: 'query',
    title: 'Retrieve content',
    code: `query = 'What is TiDB?'

embedding_query = open_ai_client.embeddings.create(
   input=[query], model=model_name).data[0].embedding

with Session(engine) as session:
   entity = session.query(Entity).order_by(
   Entity.content_vec.cosine_distance(embedding_query)
   ).limit(1).first()

   print(entity.content)
`,
  },
];

export default function Developer(props: any) {
  return (
    <section>
      <div className="max-w-[1512px] mx-auto px-4 sm:px-8 lg:px-12">
        <div className={clsx(styles.sectionTopBorder, 'py-20 lg:px-16')}>
          <h3 className="pb-6 text-center leading-tight">
            Simplest way to create end-to-end
            <br />
            RAG-Enabled Search Apps
          </h3>
          <p className="text-center text-base">
            TiDB&apos;s vector search capabilities make it incredibly easy to
            integrate Retrieval-Augmented Generation (RAG) into your
            applications
          </p>
          <DevSteps />
        </div>
      </div>
    </section>
  );
}

const DevSteps = (props: any) => {
  const [activeItem, setActiveItem] = React.useState('cluster');
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const interval = setInterval(() => {
      const index = DevStepsItem.findIndex((item) => item.id === activeItem);
      const nextIndex = (index + 1) % DevStepsItem.length;
      setActiveItem(DevStepsItem[nextIndex].id);
    }, 3000);

    return () => clearInterval(interval);
  }, [activeItem, paused]);

  const handleItemClick = (id: string) => {
    setActiveItem(id);
    setPaused(true);
  };

  return (
    <div className="flex flex-col gap-8 pt-14 md:flex-row md:pt-20 lg:gap-12">
      <div className="flex-1 space-y-12 md:max-w-[327px] md:space-y-5">
        {DevStepsItem.map((item) => (
          <div key={item.id}>
            <h4
              onClick={() => handleItemClick(item.id)}
              className={clsx(
                styles.tabBorder,
                { [styles.tabBorderActive]: item.id === activeItem },
                'cursor-pointer py-4 pl-6 text-2xl text-[#98DCFF]',
              )}
            >
              {item.title}
            </h4>
            <div className={clsx(styles.codeBorder, 'mt-4 md:hidden')}>
              <div className={clsx(styles.codeBorderContent)}>
                <SyntaxHighlighter language="python" style={vscDarkPlus}>
                  {item.code}
                </SyntaxHighlighter>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className={clsx(styles.codeBorder, 'hidden flex-1 md:block')}>
        <div className={clsx(styles.codeBorderContent)}>
          {DevStepsItem.map((item) => (
            <Transition
              key={item.id + activeItem}
              appear={true}
              show={item.id === activeItem}
            >
              <div className="transition duration-500 ease-in-out data-[closed]:opacity-0">
                <SyntaxHighlighter language="python" style={vscDarkPlus}>
                  {item.code}
                </SyntaxHighlighter>
              </div>
            </Transition>
          ))}
        </div>
      </div>
    </div>
  );
};