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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
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 { TabList } from "@coreai-ds/react-components";
import { Tab } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { AirplaneFilled } from "@fluentui/react-icons";
import { AirplaneRegular } from "@fluentui/react-icons";
import { AirplaneTakeOffFilled } from "@fluentui/react-icons";
import { AirplaneTakeOffRegular } from "@fluentui/react-icons";
import { TimeAndWeatherFilled } from "@fluentui/react-icons";
import { TimeAndWeatherRegular } from "@fluentui/react-icons";
const useStyles = makeStyles({
    root: {
        alignItems: 'flex-start',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        padding: '50px 20px',
        rowGap: '20px',
    },
    panels: {
        padding: '0 10px',
        '& th': {
            textAlign: 'left',
            padding: '0 30px 0 0',
        },
    },
    propsTable: {
        '& td:first-child': {
            fontWeight: tokens.fontWeightSemibold,
        },
        '& td': {
            padding: '0 30px 0 0',
        },
    },
});
const Airplane = bundleIcon(AirplaneFilled, AirplaneRegular);
const AirplaneTakeOff = bundleIcon(AirplaneTakeOffFilled, AirplaneTakeOffRegular);
const TimeAndWeather = bundleIcon(TimeAndWeatherFilled, TimeAndWeatherRegular);
export const WithPanels = (): JSXElement => {
    const styles = useStyles();
    const [selectedValue, setSelectedValue] = React.useState<TabValue>('conditions');
    const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
        setSelectedValue(data.value);
    };
    const Arrivals = React.memo(() => (<div role="tabpanel" aria-labelledby="components-tablist--with-panels-Arrivals">
      <table>
        <thead>
          <th>Origin</th>
          <th>Gate</th>
          <th>ETA</th>
        </thead>
        <tbody>
          <tr>
            <td>DEN</td>
            <td>C3</td>
            <td>12:40 PM</td>
          </tr>
          <tr>
            <td>SMF</td>
            <td>D1</td>
            <td>1:18 PM</td>
          </tr>
          <tr>
            <td>SFO</td>
            <td>E18</td>
            <td>1:42 PM</td>
          </tr>
        </tbody>
      </table>
    </div>));
    const Departures = React.memo(() => (<div role="tabpanel" aria-labelledby="components-tablist--with-panels-Departures">
      <table>
        <thead>
          <th>Destination</th>
          <th>Gate</th>
          <th>ETD</th>
        </thead>
        <tbody>
          <tr>
            <td>MSP</td>
            <td>A7</td>
            <td>8:26 AM</td>
          </tr>
          <tr>
            <td>DCA</td>
            <td>N2</td>
            <td>9:03 AM</td>
          </tr>
          <tr>
            <td>LAS</td>
            <td>E15</td>
            <td>2:36 PM</td>
          </tr>
        </tbody>
      </table>
    </div>));
    const Conditions = React.memo(() => (<div role="tabpanel" aria-labelledby="components-tablist--with-panels-Conditions">
      <table className={styles.propsTable}>
        <tbody>
          <tr>
            <td>Time</td>
            <td>6:45 AM</td>
          </tr>
          <tr>
            <td>Temperature</td>
            <td>68F / 20C</td>
          </tr>
          <tr>
            <td>Forecast</td>
            <td>Overcast</td>
          </tr>
          <tr>
            <td>Visibility</td>
            <td>0.5 miles, 1800 ft runway visual range</td>
          </tr>
        </tbody>
      </table>
    </div>));
    return (<div className={styles.root}>
      <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
        <Tab id="components-tablist--with-panels-Arrivals" icon={<Airplane />} value="arrivals">
          Arrivals
        </Tab>
        <Tab id="components-tablist--with-panels-Departures" icon={<AirplaneTakeOff />} value="departures">
          Departures
        </Tab>
        <Tab id="components-tablist--with-panels-Conditions" icon={<TimeAndWeather />} value="conditions">
          Conditions
        </Tab>
      </TabList>
      <div className={styles.panels}>
        {selectedValue === 'arrivals' && <Arrivals />}
        {selectedValue === 'departures' && <Departures />}
        {selectedValue === 'conditions' && <Conditions />}
      </div>
    </div>);
};

export default WithPanels;