import reflex as rx

from components.ui.accordion import accordion


def accordion_basic():
    return rx.el.div(
        accordion.root(
            accordion.item(
                accordion.trigger("Models"),
                accordion.panel(
                    rx.el.p("- Genesis launched a new era of exploration."),
                    rx.el.p("- Explorer uncovered new planets beyond our reach."),
                    rx.el.p("- Voyager 1 ventured into interstellar space."),
                    rx.el.p("- Apollo landed humans on the Moon."),
                ),
                value="section-1",
            ),
            accordion.item(
                accordion.trigger("Spacecraft"),
                accordion.panel(
                    rx.el.p("- Curiosity sent back valuable data from Mars."),
                    rx.el.p("- The Hubble Telescope captured distant galaxies."),
                    rx.el.p("- James Webb will explore the universe's origins."),
                    rx.el.p("- The ISS orbits Earth, conducting critical experiments."),
                ),
                value="section-2",
            ),
            accordion.item(
                accordion.trigger("Space Discoveries"),
                accordion.panel(
                    rx.el.p("- Saturn's rings have fascinated scientists for years."),
                    rx.el.p("- The Mars Rover is studying the planet's surface."),
                    rx.el.p(
                        "- NASA's Artemis program aims to return humans to the Moon."
                    ),
                    rx.el.p("- Solar missions help us understand space weather."),
                ),
                value="section-3",
            ),
            class_name="w-full max-w-md mx-auto",
            default_value=["section-1"],
        ),
        class_name="h-[45vh] w-full justify-center pt-10 px-8",
    )

import reflex as rx

from components.ui.accordion import accordion

items = [
    {
        "value": "notifications",
        "trigger": "Notification Settings",
        "content": (
            "Manage how you receive notifications. You can enable email alerts "
            "for updates or push notifications for mobile devices."
        ),
    },
    {
        "value": "privacy",
        "trigger": "Privacy & Security",
        "content": (
            "Control your privacy settings and security preferences. Enable "
            "two-factor authentication, manage connected devices, review active "
            "sessions, and configure data sharing preferences. You can also "
            "download your data or delete your account."
        ),
    },
    {
        "value": "billing",
        "trigger": "Billing & Subscription",
        "content": (
            "View your current plan, payment history, and upcoming invoices. "
            "Update your payment method, change your subscription tier, or "
            "cancel your subscription."
        ),
    },
]


def accordion_multiple() -> rx.Component:
    return accordion.root(
        *[
            accordion.item(
                accordion.trigger(item["trigger"]),
                accordion.panel(item["content"]),
                value=item["value"],
            )
            for item in items
        ],
        multiple=True,
        default_value=["notifications"],
        class_name="max-w-sm",
    )

import reflex as rx

from components.ui.accordion import accordion


def accordion_disabled() -> rx.Component:
    return accordion.root(
        accordion.item(
            accordion.trigger("Can I access my account history?"),
            accordion.panel(
                "Yes, you can view your complete account history including all "
                "transactions, plan changes, and support tickets in the Account "
                "History section of your dashboard."
            ),
            value="item-1",
        ),
        accordion.item(
            accordion.trigger("Premium feature information"),
            accordion.panel(
                "This section contains information about premium features. "
                "Upgrade your plan to access this content."
            ),
            value="item-2",
            disabled=True,
        ),
        accordion.item(
            accordion.trigger("How do I update my email address?"),
            accordion.panel(
                "You can update your email address in your account settings. "
                "You'll receive a verification email at your new address to "
                "confirm the change."
            ),
            value="item-3",
        ),
        class_name="max-w-sm",
    )

import reflex as rx

from components.ui.accordion import accordion

items = [
    {
        "value": "billing",
        "trigger": "How does billing work?",
        "content": (
            "We offer monthly and annual subscription plans. Billing is charged "
            "at the beginning of each cycle, and you can cancel anytime. All "
            "plans include automatic backups, 24/7 support, and unlimited team "
            "members."
        ),
    },
    {
        "value": "security",
        "trigger": "Is my data secure?",
        "content": (
            "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and "
            "regular third-party security audits. All data is encrypted at rest "
            "and in transit using industry-standard protocols."
        ),
    },
    {
        "value": "integration",
        "trigger": "What integrations do you support?",
        "content": (
            "We integrate with 500+ popular tools including Slack, Zapier, "
            "Salesforce, HubSpot, and more. You can also build custom "
            "integrations using our REST API and webhooks."
        ),
    },
]


def accordion_borders() -> rx.Component:
    return accordion.root(
        *[
            accordion.item(
                accordion.trigger(item["trigger"]),
                accordion.panel(item["content"]),
                value=item["value"],
                class_name="border-b px-4 last:border-b-0",
            )
            for item in items
        ],
        default_value=["billing"],
        class_name="max-w-sm rounded-lg border border-input",
    )

import reflex as rx

from components.ui.accordion import accordion
from components.ui.card import card

items = [
    {
        "value": "plans",
        "trigger": "What subscription plans do you offer?",
        "content": (
            "We offer three subscription tiers: Starter ($9/month), "
            "Professional ($29/month), and Enterprise ($99/month). Each plan "
            "includes increasing storage limits, API access, priority support, "
            "and team collaboration features."
        ),
    },
    {
        "value": "billing",
        "trigger": "How does billing work?",
        "content": (
            "Billing occurs automatically at the start of each billing cycle. "
            "We accept all major credit cards, PayPal, and ACH transfers for "
            "enterprise customers. You'll receive an invoice via email after "
            "each payment."
        ),
    },
    {
        "value": "cancel",
        "trigger": "How do I cancel my subscription?",
        "content": (
            "You can cancel your subscription anytime from your account "
            "settings. There are no cancellation fees or penalties. Your "
            "access will continue until the end of your current billing "
            "period."
        ),
    },
]


def accordion_card() -> rx.Component:
    return card.root(
        card.header(
            card.title("Subscription & Billing"),
            card.description(
                "Common questions about your account, plans, payments and "
                "cancellations."
            ),
        ),
        card.content(
            accordion.root(
                *[
                    accordion.item(
                        accordion.trigger(item["trigger"]),
                        accordion.panel(item["content"]),
                        value=item["value"],
                    )
                    for item in items
                ],
                default_value=["plans"],
            ),
        ),
        class_name="w-full max-w-sm",
    )