import AccordionSection from "@insite/mobius/AccordionSection";
import { AccordionSectionHeaderProps } from "@insite/mobius/AccordionSection/AccordionSectionHeader";
import AccordionSectionPanel from "@insite/mobius/AccordionSection/AccordionSectionPanel";
import * as React from "react";
import { PropsWithChildren } from "react";
import { css } from "styled-components";

const SideBarAccordionSection: React.FunctionComponent<PropsWithChildren<{ title: string; inPopover?: boolean }>> = ({
    title,
    children,
    inPopover,
}) => {
    const paddingValue = inPopover ? 30 : 35;
    const lineStyle = {
        width: "305px",
        height: "1px",
        backgroundColor: "#D6D6D6",
        margin: "4px 0 0 35px",
    };

    return (
        <>
            <AccordionSection
                title={title}
                titleTypographyProps={{
                    variant: "h6",
                    css: css`
                        margin-bottom: 0;
                        margin-top: 0;
                    `,
                }}
                headerProps={{
                    css: css<AccordionSectionHeaderProps>`
                        background-color: transparent;
                        margin: ${inPopover ? "30px" : 0} -${inPopover ? paddingValue : 0}px 0;
                        &:hover {
                            background-color: #d4e0fd;
                            button {
                                span {
                                    ${({ expanded, theme }) => !expanded && `color: ${theme.colors.primary.main};`}
                                }
                            }
                        }
                        button {
                            padding: 7px ${paddingValue}px;
                            border: 0;
                            background-color: transparent;
                            > span {
                                color: ${({ expanded, theme }) =>
                                    expanded ? theme.colors.common.accentContrast : theme.colors.text.main};
                                font-weight: 400;
                            }
                            &:focus {
                                border: 0;
                                background-color: transparent;
                                padding: 7px ${paddingValue}px;
                                > span {
                                    color: ${({ expanded, theme }) =>
                                        expanded ? theme.colors.primary.main : theme.colors.text.main};
                                }
                            }
                        }
                        ${/* sc-selector */ AccordionSectionPanel} + & button {
                            &:focus {
                                border: 0;
                                padding: 7px ${paddingValue}px;
                            }
                        }
                    `,
                }}
                panelProps={{
                    css: css`
                        border: 0;
                        padding: 0 ${paddingValue}px 3px 8px;
                        background-color: #ededed;
                        font-size: 14px;
                        margin: 0 0 0 35px;

                        :is(dd) > *,
                        h6,
                        label,
                        span,
                        select,
                        input {
                            font-size: 14px !important;
                        }

                        :is(dd) > nav,
                        :is(dd) > div {
                            padding: 0;
                            margin: 0;
                        }

                        :is(dd) > div {
                            display: flex;
                            flex-direction: column;
                        }

                        :is(dd) > div[data-id="checkbox"] {
                            display: flex;
                            flex-direction: row;
                            width: 270px !important;
                            margin: 5px 0;
                        }

                        :is(dd) > div > label,
                        :is(dd) > div > div > select,
                        :is(dd) > div > div > input,
                        :is(dd) > div > div > ul,
                        :is(dd) > div > div > div > input,
                        :is(dd) > div > div > div > span:first-of-type,
                        :is(dd) > div > div > div > ul {
                            width: 270px !important;
                        }

                        :is(dd) > div > div > select {
                            height: 30px !important;
                            border-radius: 3px !important;
                            border-color: #9e9e9e !important;
                        }

                        :is(dd) > div > div > input,
                        :is(dd) > div > div > div > input,
                        :is(dd) > div > div > div > input + span:first-of-type {
                            height: 30px !important;
                            margin-top: -2px !important;
                            border-radius: 3px !important;
                            border-color: #9e9e9e !important;
                        }

                        :is(dd) > div > div > select + span:first-of-type,
                        :is(dd) > div > div > div > input + span + span + span {
                            left: 232px !important;
                            width: 36px !important;
                            height: 25px !important;
                        }

                        :is(dd) > div > div > div > input + span:first-of-type {
                            padding: 8px 0 10px 8px;
                            margin-top: -7px !important;
                        }

                        :is(dd) > label > nav,
                        :is(dd) > div > div > div[tabindex="0"] {
                            left: 18px !important;
                        }

                        :is(dd) > label > nav {
                            padding-top: 10px;
                        }
                    `,
                }}
            >
                {children}
            </AccordionSection>
            <div style={lineStyle}></div>
        </>
    );
};

export default SideBarAccordionSection;
