import style from '../AdminTable/Admin.module.css';
import { getQueryValue } from '@/api/cache/query';
import type { ResponseQueries } from '@/api/cache/types';
import type { CollapseProps } from 'antd';
import { Button, Collapse } from 'antd';
import { useState } from 'react';
import styled from 'styled-components';

type IProps = {
  readonly data: string;
  readonly index: number;
  readonly name: string;
  readonly onClick: (name: string, key: string) => void;
};

const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
`;

export default function AdminRow(props: IProps) {
  const { data, index, name, onClick } = props;
  const defaultItems: CollapseProps['items'] = [
    {
      children: <p>{data}</p>,
      key: index.toString(),
      label: data,
    },
  ];

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [queryText, setQueryText] = useState<ResponseQueries>({});
  const [items, setItems] = useState<CollapseProps['items']>(defaultItems);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [key, setKey] = useState(data);

  const handleClick = () => {
    onClick(name, key);
  };

  const handleChange = async () => {
    const query = await getQueryValue(key);
    setQueryText(query);
    setItems(
      [...items].map((obj) => ({
        ...obj,
        children: <p>{JSON.stringify(query)}</p>,
      }))
    );
  };

  return (
    <Wrapper>
      <Collapse className={style.collapse} onChange={handleChange} items={items} />
      <Button onClick={handleClick}>Удалить</Button>
    </Wrapper>
  );
}