import React, { useState } from 'react'

import './PolicyAccordion.css'

function Accordion({ index, item }) {
  const [isActive, setIsActive] = useState(false)

  return (
    <>
      <li key={index}>
        <h4 className="title" onClick={() => setIsActive(!isActive)}>
          {item.title}
          {' '}
          {isActive ? '-' : '+'}
          {' '}
        </h4>
        <span className="policy-number">{item.name}</span>

        {isActive && (
          <>

            <span>{item.path}</span>
            <span className="text">{item.description}</span>
            <span className="subtitle">Policy Usage</span>
            {item.mappings.map((mapping, index) => (
              <span className="text">{mapping.templatePath}</span>
            ))}

            {item.aemPolicyStyleSystemGroupDTOS
              && (
                <div className="style-section">
                  {item.aemPolicyStyleSystemGroupDTOS.map((item, index) => (
                    <div key={index}>
                      <span
                        className="subtitle"
                      >
                        Group:
                        {item.styleGroupLabel}
                      </span>
                      {item.styles.map((stylesItems, index) => (
                        <div className="policy-styles">
                          <span
                            className="style"
                          >
                            {stylesItems.styleLabel}
                          </span>
                          <span
                            className="style"
                          >
                            "
                            {stylesItems.styleClasses}
                            "
                          </span>
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              )}
            <span className="subtitle">Other Data:</span>
            <pre>{JSON.stringify(item.json, null, 2)}</pre>
          </>
        )}

      </li>
    </>
  )
}

export default Accordion