import React, { useState } from 'react';

import PluginTable from './PluginTable';

const ApplicationVulnerabilityDropdown = () => {
  const [openSections, setOpenSections] = useState<Set<string>>(
    new Set(['security', 'privacy', 'criminal', 'harmful', 'misinformation']),
  );

  return (
    <div>
      {[
        {
          title: 'Security Vulnerabilities',
          id: 'security',
          description: 'Technical security risks in application context.',
          vulnerabilityType: 'security',
        },
        {
          title: 'Privacy Violations',
          id: 'privacy',
          description: 'Privacy risks in application context.',
          vulnerabilityType: 'privacy',
        },
        {
          title: 'Criminal Activities',
          id: 'criminal',
          description: 'Criminal risks in application context.',
          vulnerabilityType: 'criminal',
        },
        {
          title: 'Harmful Content',
          id: 'harmful',
          description: 'Harmful content risks in application context.',
          vulnerabilityType: 'harmful',
        },
        {
          title: 'Misinformation and Misuse',
          id: 'misinformation',
          description: 'Misinformation risks in application context.',
          vulnerabilityType: 'misinformation and misuse',
        },
      ].map(({ title, id, description, vulnerabilityType }) => (
        <div key={id}>
          <h3
            id={`vulnerability-${id}`}
            onClick={() => {
              setOpenSections((prev) => {
                const newSections = new Set(prev);
                if (newSections.has(id)) {
                  newSections.delete(id);
                } else {
                  newSections.add(id);
                }
                return newSections;
              });
            }}
            style={{ cursor: 'pointer' }}
          >
            <a href={`#vulnerability-${id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
              {title} {openSections.has(id) ? '▼' : '▶'}
            </a>
          </h3>
          <p>{description}</p>
          {openSections.has(id) && (
            <PluginTable
              vulnerabilityType={vulnerabilityType}
              shouldRenderCategory={false}
              showApplicationTypes={true}
            />
          )}
        </div>
      ))}
    </div>
  );
};

export default ApplicationVulnerabilityDropdown;