import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { spacing, Stack } from '../../spacing';
import { Box } from '../box/Box';
import { Icon } from '../icon/Icon.component';
import styled from 'styled-components';
import { Text } from '../text/Text.component';
const AccordionContainer = styled(Box) `
  width: 100%;
  height: auto;
  padding: ${spacing.r16};
  border-radius: 4px;
  box-sizing: border-box;
  ${({ theme }) => `border: 0.5px solid ${theme.border};`}
`;
const AccordionHeader = styled.button `
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  color: ${(props) => props.theme.textPrimary};
  padding: 0;
  font-family: 'Lato';
  ${({ isOpen, theme }) => isOpen &&
    `
    border-bottom: 0.5px solid ${theme.border};
    padding-bottom: ${spacing.r16};
    margin-bottom: ${spacing.r8};
  `}
`;
const AccordionContent = styled.div `
  overflow: hidden;
  opacity: ${(props) => (props.isOpen ? 1 : 0)};
  transition:
    height 0.3s ease-in,
    opacity 0.3s ease-in,
    visibility 0.3s;
  visibility: ${(props) => (props.isOpen ? 'visible' : 'hidden')};
`;
const Wrapper = styled.div `
  padding: ${spacing.r8} 0 ${spacing.r8} 0;
`;
export const Accordion = ({ title, id, style, children, open = false, isEmphazed = true, }) => {
    const [isOpen, setIsOpen] = useState(open);
    useMemo(() => {
        setIsOpen(open);
    }, [open]);
    const handleToggleContent = (e) => {
        setIsOpen((prev) => !prev);
    };
    return (_jsxs(AccordionContainer, { children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { isOpen: isOpen, type: "button", id: `Accordion-header-${id}`, onClick: handleToggleContent, "aria-controls": id, "aria-expanded": isOpen, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleToggleContent, children: _jsxs(Stack, { direction: "horizontal", gap: "r8", children: [_jsx(Icon, { name: "Chevron-up", size: "lg", style: {
                                    transform: isOpen ? 'rotate(180deg)' : 'rotate(90deg)',
                                    transition: 'transform 0.3s ease-in',
                                } }), _jsx(Text, { isEmphazed: isEmphazed, children: title })] }) }) }), _jsx(AccordionContent, { ref: (element) => {
                    if (isOpen) {
                        element === null || element === void 0 ? void 0 : element.style.setProperty('height', element.scrollHeight + 'px');
                    }
                    else {
                        element === null || element === void 0 ? void 0 : element.style.setProperty('height', '0px');
                    }
                }, isOpen: isOpen, id: id, "aria-labelledby": `Accordion-header-${id}`, role: "region", children: _jsx(Wrapper, { style: style, children: children }) })] }));
};
