import React, { useRef } from 'react';
import { Svg, G } from 'react-native-svg';
import * as d3 from 'd3';
import { Dimensions } from 'react-native';
import { Line } from './line';
import { YAxis } from './y-axis';
import { XAxis } from './x-axis';
import { SBox } from '../../common/s-components/layout/s-box';
import { Button } from '../../common/components/button';
// import { fp as _ } from '../../common/utils/fp';
import { XAxisLabels } from './x-axis-labels';
import { YAxisLabels } from './y-axis-labels';
import { theme } from '../../app/theme';
import { ShadowBox } from '../../common/components/shadow-box';
import {
  // PORTRAIT_WIDTH,
  PORTRAIT_HEIGHT,
  GRAPH_PADDING_TOP_RATIO,
} from '../constants';
import { Icon } from '../../common/components/icon';
import { SRow } from '../../common/s-components/layout/s-row';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { TCoordinates, TGraphMaxes, TIconName } from '../../common/types';
import { SGraphTitle } from '../s-components/s-graph-title';
import { SkeletonsSmall } from '../../common/components/skeleton-small';

type TProps = {
  title?: string;
  dotted: TCoordinates;
  maxes: TGraphMaxes;
  ticks: number[];
  onFullScreen: () => void;
  variant?: string;
  id: string;
  settingsHeader?: Record<string, any>;
  settingsGraph?: Record<string, any>;
  settingsContainer?: Record<string, any>;
  renderFooter?: any;
  renderError?: any;
  renderGraphSkeleton?: any;
  showButtonSkeleton?: boolean;
};

export const LineGraph2: React.FC<TProps> = props => {
  let {
    dotted,
    maxes: { xMin, xMax, yMax } = {},
    ticks,
    onFullScreen,
    title,
    variant,
    id,
    settingsGraph: {
      // @ts-ignore
      graphInnerHeight = 184.5,
      // @ts-ignore
      vOffset = 16,
      // @ts-ignore
      svgHeight = PORTRAIT_HEIGHT,
      // @ts-ignore
      topYLabelOffset = 17,
      // @ts-ignore
      paddingTop = 65,
    },
    settingsContainer: {
      // @ts-ignore
      paddingBottom,
    },
    settingsHeader: {
      // @ts-ignore
      topOffset = 10,
    },
    renderFooter,
    renderError,
    renderGraphSkeleton,
    showButtonSkeleton,
  } = props;
  const width = useRef(Dimensions.get('window').width - 32);

  const getScales = () => {
    const xScale = d3
      .scaleLinear()
      .domain([xMin!, xMax!])
      .range([vOffset, width.current - vOffset]);
    const yScale = d3
      .scaleLinear()
      .domain([0, yMax!])
      .range([graphInnerHeight, paddingTop]);

    return { xScale, yScale };
  };

  let yTicks: any;
  let graphMax: any;

  const { xScale, yScale } = getScales();
  yTicks = [0, yMax];
  graphMax = yMax! / GRAPH_PADDING_TOP_RATIO;
  // const hideGraph = _.any(_.isNil)([yMax, xMax, xMin]);
  const hideGraph = !yMax || !xMax || !xMin;
  const btnWidth = 140;
  const btnLeftPosition = (width.current - btnWidth) / 2;

  return (
    <SBox ml={16} position="relative" flex={1} flexShrink={0} flexGrow={1}>
      <SBox borderRadius={8} flex={1}>
        <ShadowBox
          height="100%"
          bg={theme.colors.eastBay}
          borderRadius={8}
          androidShadowOffset={2}
        >
          <SGradientCard
            colors={theme.gradients.marketCard}
            opacity={0.4}
            width={width.current}
            borderRadius={8}
          />
          <SBox px={16} pt={topOffset}>
            <SRow>
              {id && id !== 'combined' ? (
                <Icon
                  mt={2}
                  ml={-4}
                  mr={5}
                  size={22}
                  color={theme.colors.lavenderGray}
                  name={id as TIconName}
                />
              ) : null}
              <SGraphTitle>{title}</SGraphTitle>
            </SRow>
          </SBox>
          <SBox height={svgHeight}>
            {!hideGraph ? (
              <>
                <XAxisLabels
                  ticks={ticks}
                  scale={xScale}
                  yOffset={graphInnerHeight}
                  ticksVariant="edge"
                />
                <YAxisLabels
                  ticks={yTicks}
                  scale={yScale}
                  offsetLeft={vOffset}
                  offsetTop={topYLabelOffset}
                  axisExclusion
                />
                <Svg height="100%" width={width.current}>
                  <YAxis
                    ticks={yTicks}
                    scale={yScale}
                    xOffsetRight={width.current}
                  />
                  <XAxis
                    ticks={ticks}
                    scale={xScale}
                    yOffset={graphInnerHeight}
                    ticksVariant="edge"
                  />
                  <G transform="translate(0, 0)">
                    {dotted ? (
                      <Line
                        graphMax={graphMax}
                        variant={variant}
                        data={dotted}
                        xScale={xScale}
                        yScale={yScale}
                      />
                    ) : null}
                  </G>
                </Svg>
              </>
            ) : null}
            {renderError ? renderError() : null}
            {renderGraphSkeleton ? renderGraphSkeleton() : null}
          </SBox>
          <SBox pb={paddingBottom}>{renderFooter ? renderFooter() : null}</SBox>
        </ShadowBox>
      </SBox>

      <SBox
        position="absolute"
        bottom={-21}
        height={44}
        left={btnLeftPosition}
        zIndex={1}
      >
        {showButtonSkeleton ? (
          <SkeletonsSmall height={44} width={140} borderRadius={22} />
        ) : null}
        {!hideGraph && !showButtonSkeleton && onFullScreen ? (
          <Button
            testID="line-graph-details-button"
            onPress={() => {
              onFullScreen();
            }}
            width={btnWidth}
          >
            Details
          </Button>
        ) : null}
      </SBox>
    </SBox>
  );
};

LineGraph2.defaultProps = {
  title: 'STREAMS',
  variant: 'variant2',
  settingsHeader: {},
  settingsGraph: {},
  settingsContainer: {},
  renderFooter: () => null,
  renderError: () => null,
  renderGraphSkeleton: () => null,
  showButtonSkeleton: false,
};