import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
import { Typography, type SxProps } from '@mui/material';
import isUndefined from 'lodash/isUndefined';

import AppStoreIcon from './images/app-store.svg?react';
import GooglePlayIcon from './images/google-play.svg?react';
import AndroidDownloadIcon from './images/android_download.svg?react';

import Button from '../Button';
import { mergeProps } from '../Util';
import { styled } from '../Theme';
import type { Locale } from '../type';

export interface WalletDownloadProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  layout?: 'vertical' | 'horizontal';
  storeLayout?: 'vertical' | 'horizontal';
  style?: React.CSSProperties;
  iosLink?: string;
  androidLink?: string;
  androidDownLoadUrl?: string;
  locale?: Locale;
  sx?: SxProps;
}

export default function WalletDownload(rawProps: WalletDownloadProps) {
  const browser = useBrowser();
  const props = Object.assign({}, rawProps);
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.title)) {
    props.title = 'Download DID Wallet';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.layout)) {
    props.layout = 'vertical';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.storeLayout)) {
    props.storeLayout = 'horizontal';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.locale)) {
    props.locale = 'zh';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.iosLink)) {
    props.iosLink = 'https://itunes.apple.com/app/id1460083542';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.androidLink)) {
    props.androidLink = 'https://play.google.com/store/apps/details?id=com.arcblock.wallet.app.product';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.androidDownLoadUrl)) {
    props.androidDownLoadUrl = 'https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk';
  }
  // eslint-disable-next-line react/prop-types
  if (isUndefined(props.style)) {
    props.style = {};
  }
  const newProps = mergeProps(props, WalletDownload, ['style']) as WalletDownloadProps;
  const { title, children, iosLink, androidLink, androidDownLoadUrl, locale, ...rest } = newProps;

  const isAndroid = browser.mobile.android.phone || browser.mobile.android.tablet;
  const isIOS = browser.mobile.apple.phone || browser.mobile.apple.tablet;

  return (
    <Container {...rest}>
      <div className="download-text">
        {!!title && (
          <Typography className="download-title" component="div">
            {title}
          </Typography>
        )}
        {children && (
          <Typography className="download-extra" component="div">
            {children}
          </Typography>
        )}
      </div>
      {!browser.mobile.any && (
        <div className="download-store-list">
          <Button className="download-link" component="a" href={iosLink}>
            <AppStoreIcon />
          </Button>
          {locale === 'zh' && (
            <Button component="a" className="download-link" href={androidDownLoadUrl}>
              <AndroidDownloadIcon />
            </Button>
          )}
          {locale === 'en' && (
            <Button component="a" className="download-link" href={androidLink}>
              <GooglePlayIcon />
            </Button>
          )}
        </div>
      )}
      {isAndroid && (
        <div className="download-store-list">
          {locale === 'zh' && (
            <Button component="a" href={androidDownLoadUrl} variant="outlined" color="primary">
              本地下载
            </Button>
          )}
          {locale === 'en' && (
            <Button component="a" href={androidLink} variant="outlined" color="primary">
              Download
            </Button>
          )}
        </div>
      )}
      {isIOS && (
        <div className="download-store-list">
          <Button component="a" href={iosLink} variant="outlined" color="primary">
            Download
          </Button>
        </div>
      )}
    </Container>
  );
}

type ContainerProps = {
  layout?: WalletDownloadProps['layout'];
  storeLayout?: WalletDownloadProps['storeLayout'];
};

const Container = styled('div')<ContainerProps>`
  display: flex;
  flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
  align-items: center;

  .download-title {
    margin-right: ${(props) => (props.layout === 'vertical' ? '0' : '16px')};
    margin-bottom: ${(props) => (props.layout === 'vertical' ? '16px' : '0')};
  }

  .download-store-list {
    display: flex;
    flex-direction: ${(props) => (props.storeLayout === 'vertical' ? 'column' : 'row')};
    justify-content: space-between;
    align-items: center;

    .download-link {
      padding: 0;
      margin: 0;

      margin-right: ${(props) => (props.storeLayout === 'vertical' ? '0' : '16px')};
      margin-bottom: ${(props) => (props.storeLayout === 'vertical' ? '16px' : '0')};

      &:last-of-type {
        margin-right: 0;
        margin-bottom: 0;
      }
    }
  }
`;
