// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import type { TabValue } from "@coreai-ds/react-components";
import type { SelectTabEvent } from "@coreai-ds/react-components";
import type { SelectTabData } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { TabList } from "@coreai-ds/react-components";
import { Tab } from "@coreai-ds/react-components";

export const LeftAlignTabText = () => {
    const tabContent: Record<string, {
        heading: string;
        body: string;
    }> = {
        overview: {
            heading: 'Overview',
            body: 'A high-level summary of the project, its goals, and current status.',
        },
        activity: {
            heading: 'Activity',
            body: 'A chronological feed of recent changes, comments, and status updates.',
        },
        settings: {
            heading: 'Settings',
            body: 'Configuration options such as notifications, access, and integrations.',
        },
    };
    const [selectedValue, setSelectedValue] = React.useState<TabValue>('overview');
    const onTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
        setSelectedValue(data.value);
    };
    const { heading, body } = tabContent[selectedValue as string];
    const styles = /* css */ `
      .tab-list-left-align-example {
        display: flex;
        flex-direction: column;
        max-width: 480px;
        row-gap: var(--spacingVerticalXXS);
      }

      .tab-list-left-align-example__title {
        margin: 0;
      }

      .tab-list-left-align-example__tab-list {
        margin-inline: calc(-1 * var(--spacingHorizontalM));
      }

      .tab-list-left-align-example__content {
        color: var(--colorNeutralForeground1);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="tab-list-left-align-example">
          <Text as="h2" size={500} weight="semibold" block className="tab-list-left-align-example__title">
            Left-align tab content
          </Text>

          <TabList selectedValue={selectedValue} onTabSelect={onTabSelect} appearance="subtle" className="tab-list-left-align-example__tab-list">
            <Tab value="overview">Overview</Tab>
            <Tab value="activity">Activity</Tab>
            <Tab value="settings">Settings</Tab>
          </TabList>

          <div className="tab-list-left-align-example__content" role="tabpanel" aria-labelledby={selectedValue as string}>
            <Text as="h3" size={300} weight="semibold" block>
              {heading}
            </Text>
            <Text as="p" size={200} weight="regular" block>
              {body}
            </Text>
          </div>
        </div>
      </>);
};

export default LeftAlignTabText;