import { React, css, storage } from '../../common';
import { Link } from '../../components';
import { Image } from './Image';

const styles = {
  base: css({}),
  button: css({
    cursor: 'pointer',
    color: '#4990E2',
  }),
  ul: css({
    listStyle: 'none',
    paddingLeft: 0,
  }),
};

// storage.cookie.
const cookies = {
  server: () => storage.cookie.server(),
  myCookie: storage.cookie.prop<{ count: number }>('example.myCookie'),
};

const writeCookieHandler = () => {
  const value = cookies.myCookie() || { count: 0 };
  cookies.myCookie({ ...value, count: value.count + 1 });
};

export interface IHomeProps {
  cookieCount?: number;
}
export interface IHomeState {
  isAuthenticated: boolean;
}
export class Home extends React.PureComponent<IHomeProps, IHomeState> {
  public static async getInitialProps(ctx: any) {
    // Process cookies.
    let myCookieValue = cookies.myCookie(undefined, { ctx });
    if (!myCookieValue) {
      myCookieValue = { count: 0 };
      cookies
        .server()
        .add(cookies.myCookie, myCookieValue)
        .write(ctx);
    }
    const props: IHomeProps = { cookieCount: myCookieValue.count };
    return props;
  }

  public state: IHomeState = { isAuthenticated: false };

  public render() {
    const { cookieCount } = this.props;
    const myCookie =
      cookieCount === undefined ? `undefined` : `count:${cookieCount}`;

    return (
      <div {...styles.base}>
        <h1>Hello World!</h1>
        <ul {...styles.ul}>
          <li>
            Next Routes
            <ul>
              <li>
                <Anchor href={'/normal'} label={'Normal Route'} />
              </li>
              <li>
                <Anchor href={'/browser'} label={'Browser Check'} />
              </li>
              <li>
                <Link href={'/prefetch'} prefetch={true}>
                  <a>Link: Prefetch</a>
                </Link>
              </li>
              <li>
                <Anchor href={'/b'} /> (renders <code>/b.tsx</code>)
              </li>
              <li>
                <Anchor href={'/custom/a'} /> (renders <code>/b.tsx</code> from
                custom route)
              </li>
              <li>
                <Anchor href={'/range/foo'} /> (renders <code>/range.tsx</code>{' '}
                from custom express route: <code>{'/range/:id'}</code>)
              </li>
            </ul>
          </li>
          <li>
            Middleware (Express)
            <ul>
              <li>
                <Anchor href={'/api'} /> (GET)
              </li>
              <li>
                <Anchor href={'/yo'} /> (GET)
              </li>
              <li>
                <Anchor href={'/middleware'} />
              </li>
              <li>
                <Anchor href={'/manifest?path=foo/**&markdown'} />
              </li>
              <li>
                <Anchor href={'/resource/foo/README.md'} />
              </li>
              <li>
                <Anchor href={'/resource/foo/README.md?parse'} />
              </li>
            </ul>
          </li>
          <li>
            Redirection
            <RedirectLinks />
          </li>
          <li>
            File
            <ul>
              <li>
                <Anchor href={'/package.json'} />
              </li>
              <li>
                <Anchor href={'/foo.css'} />
              </li>
            </ul>
          </li>
          <li>
            Cookies
            <ul>
              <li>
                myCookie: <code>{myCookie}</code>
              </li>
              <li>
                <Button onClick={writeCookieHandler}>
                  write cookie (increment)
                </Button>
              </li>
            </ul>
          </li>
        </ul>
        <Image url={'/images/monkey.jpg'} width={300} title={'module: local'} />
        <Image
          url={'/test.ui/images/monkey.jpg'}
          width={300}
          title={'module: test.ui'}
        />
      </div>
    );
  }
}

const RedirectLinks = () => {
  return (
    <ul>
      <li>
        <RedirectLink from={'/redirect/1'} to={'/normal'} />
      </li>
      <li>
        <RedirectLink from={'/redirect/2'} to={'/normal?color=red'} />
      </li>
      <li>
        <RedirectLink from={'/redirect/2?large'} to={'/normal?color=red'}>
          (merge query string)
        </RedirectLink>
      </li>
      <li>
        <RedirectLink from={'/redirect/id/1234'} to={'/normal?id=1234'}>
          (Route: <code>/redirect/id/:id</code>)
        </RedirectLink>
      </li>
    </ul>
  );
};

const RedirectLink = ({
  from,
  to,
  children,
}: {
  from: string;
  to: string;
  children?: React.ReactNode;
}) => {
  return (
    <span>
      <a href={from}>{from}</a>
      <span> ➔ </span>
      <a href={to}>{to}</a> <span>{children}</span>
    </span>
  );
};

const Button = (props: { children?: React.ReactNode; onClick?: any }) => {
  const styles = {
    base: css({
      color: '#4990E2', // Blue.
      cursor: 'pointer',
    }),
  };
  return (
    <code {...styles.base} onClick={props.onClick}>
      {props.children}
    </code>
  );
};

const Anchor = (props: { href: string; label?: string }) => {
  const { href, label = props.href } = props;
  return <a href={href}>{label}</a>;
};
