import React from 'react';
import { ChevronRightIcon } from '@heroicons/react/solid';
import { XCircleIcon } from '@heroicons/react/outline';
import { Tabs, Banner } from 'src/components';
import { Link } from 'react-router-dom';
import { AdvancedTab, GeneralTab } from './components';

const pages = [
  { name: 'Apps', to: '/apps', current: true },
  { name: 'Nextcloud', to: '', current: false },
];

const tabs = [
  { name: 'General', component: <GeneralTab /> },
  { name: 'Advanced Configuration', component: <AdvancedTab /> },
];

export const AppSingle: React.FC = () => {
  return (
    <>
      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
        <nav className="flex" aria-label="Breadcrumb">
          <ol className="flex items-center space-x-4">
            <li>
              <div className="flex items-center">
                <Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
                  <span>Dashboard</span>
                </Link>
              </div>
            </li>
            {pages.map((page) => (
              <li key={page.name}>
                <div className="flex items-center">
                  <ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
                  <Link
                    to={page.to}
                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                    aria-current={page.current ? 'page' : undefined}
                  >
                    {page.name}
                  </Link>
                </div>
              </li>
            ))}
          </ol>
        </nav>
      </div>

      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
        <Banner title="Managing single app instances coming soon." titleSm="Comming soon!" />
      </div>

      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden opacity-40 cursor-default pointer-events-none select-none">
        <div className="bg-white overflow-hidden shadow rounded-sm mb-5">
          <div className="px-4 py-5 sm:p-6 flex justify-between items-center">
            <div className="mr-4 flex items-center">
              <img
                className="h-24 w-24 rounded-md overflow-hidden mr-4"
                src="./../assets/nextcloud.svg"
                alt="Nextcloud"
              />

              <div>
                <h2 className="text-2xl leading-8 font-bold">Nextcloud</h2>
                <div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
              </div>
            </div>

            <div className="flex flex-col">
              <button
                type="button"
                className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
              >
                <XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
                Disable App
              </button>

              <button
                type="button"
                className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
              >
                View Documentation
              </button>
            </div>
          </div>
        </div>

        <div className="bg-white shadow rounded-sm">
          <div className="px-4 py-5 sm:p-6">
            <Tabs tabs={tabs} />
          </div>
        </div>
      </div>
    </>
  );
};